在 Next.JS 6 中使用 _app.js 页面组件时，转换触发得太早答案

【问题标题】：Transitions are firing too early when using _app.js page component in Next.JS 6在 Next.JS 6 中使用 _app.js 页面组件时，转换触发得太早
【发布时间】：2018-11-11 05:17:55
【问题描述】：

我正在尝试在 Next JS 中设置一个相对简单的页面转换。我使用 GSAP TweenLite 作为我的动画库，我是 react-transition-group 来处理转换，我试图在 Next.js 6.0 中引入的 _app.js 组件中完成所有这些工作。我有它“有点” 工作，但它并没有完全按照我想要的方式工作。

我遇到的问题是，当一条新路由被命中时，该路由的页面组件会立即在 DOM 顶部过渡，而退出组件会被推到页面底部，直到它过渡出来并且卸载。

我希望它做的是转换并卸载当前页面组件，然后在路由更改时转换并安装新的页面组件。如果有人对我如何更好地进行设置有任何建议，我将不胜感激。

//GSAP Animations
const fadeIn = node => {
  TweenLite.set(node, {
    opacity: 0
  });
  TweenLite.to(node, 1, {
    opacity: 1,
    ease: Power2.easeInOut
  });
};

const fadeOut = node => {
  TweenLite.set(node, {
    opacity: 1,
    scale: 1
  });
  TweenLite.to(node, 1, {
    opacity: 0,
    scale: 0.5,
    ease: Power2.easeInOut
  });
}; 

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }


  render() {
    const { Component, pageProps, style } = this.props;
    return (
      <Container>
          <Layout>
            <TransitionGroup>
              <Transition
                key={this.props.router.pathname}
                timeout={1000}
                in={true}
                onEnter={fadeIn}
                onExit={fadeOut}
                mountOnEnter={true}
                unmountOnExit={true}
              >
                <Component {...pageProps} />
              </Transition>
            </TransitionGroup>
          </Layout>
      </Container>
    );
  }
}

【问题讨论】：

您在此处发布的代码中的两个动画功能都相同。
已修复。在我的实际代码中它是正确的，但我不小心把它错误地粘贴了。

标签： javascript reactjs gsap nextjs react-transition-group

【解决方案1】：

虽然我对您的问题没有确切的答案，但希望查看下面示例中的代码可以帮助您解决问题。

https://github.com/xavczen/nextjs-page-transitions

另一种方法是使用以下模块：

https://github.com/illinois/next-page-transitions

【讨论】：