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 location = 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

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

Animate Presence exit not working framer motion

exit

unmount

reactjs

framer-motion