我正在尝试在 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>
);
}
}