reactjs - 动画存在退出不工作帧运动

Question

动画存在退出道具不起作用

我做错了什么？

<AnimatePresence>
      <motion.div
        initial={{ opacity: 0, x: "-100%" }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: "100%" }}>
        <h1>Head</h1>
      </motion.div>
</AnimatePresence>

固定的！！

通过将这两个道具添加到 Switch 来修复它：

从“react-router-dom”导入 {useLocation}；

常量位置 = useLocation();

<Switch location={location} key={location.pathname}>
//Routes
</Switch>

Answer 1

这不起作用的原因是您必须明确指定您有条件渲染的子项的键。

文档参考：https ://www.framer.com/api/motion/animate-presence/#unmount-animations

在你的情况下<motion.div>

我在这里有一些 AnimatePresense 的例子

• 有多个项目：https ://codesandbox.io/s/framer-motion-multiple-item-animation-presence-sdmq2
• 使用 React 路由器：https ://codesandbox.io/s/framer-motion-animate-react-router-transition-kczeg