首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在Next.JS 6中使用_app.js页面组件时过早触发转换

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

Stack Overflow用户
提问于 2018-06-01 14:11:26
回答 1查看 1.5K关注 0票数 0

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

我遇到的问题是,当遇到新的路由时,该路由的页面组件会立即转换到DOM的顶部,而退出的组件会被推到页面的底部,直到它转换出来并卸载。

我希望它所做的是转换和卸载当前页面组件,然后在路由更改时转换和挂载新页面组件。如果任何人有任何建议,我可以设置得更好,我将不胜感激。

代码语言:javascript
复制
//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>
    );
  }
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-08 04:33:18

虽然我不知道你的问题的确切答案,但希望下面例子中的代码能帮助你解决你的问题。

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

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

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50637072

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档