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

Question

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

我遇到的问题是，当点击一条新路线时，该路线的页面组件会立即过渡到 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

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

Transitions are firing too early when using _app.js page component in Next.JS 6

javascript

reactjs

gsap

nextjs

react-transition-group