我正在学习Next.JS和Framer Motion来提高我的技能。所以，我尝试做一个淡入/淡出页面转换，但不能让它正常工作，也不知道为什么。
淡入动画工作正常，但是，当我单击（更改当前页面）时，淡出不显示...
下面是我的代码：
/shared/layout.js
export default function Layout({ children }){
return (
<>
<Head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</Head>
<Header />
<main>
<AnimatePresence exitBeforeEnter>
{ children }
</AnimatePresence>
</main>
</>
)
}/pages/_app.js
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
export default MyApp/pages/index.js
export default function Home(){
return (
<motion.div id="home" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: .5 }}>
<Head>
<title>Home</title>
</Head>
// Bla bla bla goes here
</motion.div>
);
}/pages/about.js
export default function About(){
return (
<motion.div id="about" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: .5 }}>
<Head>
<title>About</title>
</Head>
// Bla bla bla goes here
</motion.div>
);
}/pages/contact.js
export default function Contact(){
return (
<motion.div id="home" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: .5 }}>
<Head>
<title>Contact</title>
</Head>
// Bla bla bla goes here
</motion.div>
);
}在搜索时，我发现很多人说"目前，如果不添加初始状态，退出动画将无法工作"，但我在所有motion.div组件上使用初始 prop ，并且我的AnimatePresence位置正确（我认为），作为所有motion.div组件的父级。
有人能帮帮我吗？
谢谢!
2条答案
按热度按时间eeq64g8w1#
我做了几乎相同的操作，遇到了同样的问题。我通过在
/pages/_app.js中执行以下操作解决了这个问题：所以我只是使用Nextjs提供的路由器为
Component添加了一个密钥。jecbmhm32#
我通过在_app中使用以下代码实现了相同的效果