NextJS - Framer-Motion 页面转换不触发

Question

由于某种原因，我的 NextJS 页面转换与框架运动似乎不起作用。我遵循了很多教程并做了很多研究，但它仍然不起作用。这是我的_app.tsx代码。

import '../styles/globals.css'
import '../styles/ui.css'
import '../fonts/define.css'
import { AppProps } from 'next/app'
import Layout from '../layouts/dashboard'
import Sidebar from '../components/Sidebar'
import { AnimatePresence, motion } from 'framer-motion'

const App = ({ Component, pageProps }: AppProps) => {
  return <main>
      <Sidebar/>
      <AnimatePresence>
        <motion.div initial={{opacity: 0}} animate={{opacity: 1}} exit={{opacity: 0}} className="content">
          <Component {...pageProps} />
        </motion.div>
      </AnimatePresence>
    </main>
}

export default App

当我在路线之间切换时，转换不会触发。它仅在初始加载时淡入，然后opacity: 1将样式应用于.contentdiv ，仅此而已。

感谢您的帮助！

Answer 1

我想到了。我需要向 div 添加key属性<motion.div>。在这里阅读更多内容https://www.framer.com/docs/animate-presence/#unmount-animations