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

我试图在下一个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>
    );
  }
}

---

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

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

---

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