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

Question

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

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

我要它执行的操作是过渡和卸载当前页面组件，然后在路由更改时过渡并安装新页面组件。 如果有人对我如何更好地进行设置有任何建议，我将不胜感激。

//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>
    );
  }
}

Answer 1

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

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

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

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