我正在尝试使用 framer-motion 和 Next js 来创建淡入淡出效果,但它永远不会淡出。我知道AnimatePresence allows components to animate out when they're removed from the React tree.
这可能是我的问题,但我不知道反应不够好,不知道如何修复我的结构。谁能推荐一种让它消失的方法?这里有一些页面...
_app.js
export default class BookingApp extends App {
render() {
return (
<Provider session={pageProps.session}>
<ThemeProvider theme={myTheme}>
<GlobalStyles />
<Layout>
<AnimatePresence exitBeforeEnter>
<Component {...pageProps} key={router.route} />
</AnimatePresence>
</Layout>
</ThemeProvider>
</Provider>
)
}}
一些简单的页面
class TestPage extends React.Component {
render () {
return <motion.div
exit={{ opacity:0 }}
initial={{ opacity:0 }}
animate={{ opacity:1 }}
>
{resultsList}
</motion.div>;
}}