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

Question

出于某种原因，我的带有 framer-motion 的 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 样式应用于 .content div 就是这样。

感谢您的帮助！

Answer 1

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

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

NextJS - Framer-Motion page transition doesn't fire

next.js

framer-motion