在 NextJS 中使用 Framer Motion 滑出旧路线并滑入新路线答案

【问题标题】：Slide out old route and slide in newroute with Framer Motion in NextJS在 NextJS 中使用 Framer Motion 滑出旧路线并滑入新路线
【发布时间】：2022-01-11 01:18:22
【问题描述】：

所以我在玩 Framer Motion 和 NextJS，偶然发现了一些我想要实现的东西，以便我可以学习进入和退出动画。

我有两条路线，当我单击一条路线时，我希望旧路线滑出，新路线滑入。现在所有路线都滑入。我尝试使用退出动画和初始动画中的值，但它不工作。

代码如下：

_app.js：

function MyApp({ Component, pageProps }) {
  return (
        <AnimatePresence>
            <Component {...pageProps} />
        </AnimatePresence>
    )
}

动画：

const slide = {
    hidden: {
        y: '-100%',
        opacity: 0,
    },
    visible: {
        y: 0,
        opacity: 1
    }
}

家庭比较：

const Home = () =>{
      return (
           <motion.div initial='hidden' animate='visible' exit='hidden' variants={slide}>
                  Home Component
           </motion.div>
      )
}

关于 Comp：

const About = () =>{
      return (
           <motion.div initial='hidden' animate='visible' exit='hidden' variants={slide}>
                  About Component
           </motion.div>
      )
}

【问题讨论】：

标签： reactjs animation next.js framer-motion

【解决方案1】：

来自docs：

子 motion 组件必须每个都有一个唯一的 key 属性所以 AnimatePresence 可以跟踪他们在树中的存在。

【讨论】：

我刚刚尝试在每个 div 中添加 key={router.route}。还是一样。
还尝试使用带有 attr exitBeforeEnter 的 AnimatePresence 包装 Home 和 About 组件。不工作。 :(
在你想要动画触发之前，路线不会改变吗？试试key=“home” 和key=“about”。