Animate Presence 退出不工作成帧器运动

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}；

const 位置 = 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 Router：https://codesandbox.io/s/framer-motion-animate-react-router-transition-kczeg