我正在尝试在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>
);
}
}
发布于 2018-06-08 04:33:18
虽然我不知道你的问题的确切答案,但希望下面例子中的代码能帮助你解决你的问题。
https://github.com/xavczen/nextjs-page-transitions
另一种方法是使用以下模块:
https://stackoverflow.com/questions/50637072
复制相似问题