动画存在退出不工作帧运动答案

【问题标题】：Animate Presence exit not working framer motion动画存在退出不工作帧运动
【发布时间】：2021-08-30 15:19:15
【问题描述】：

动画存在 exit 道具不起作用

我做错了什么？

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

【问题讨论】：

您是说退出动画在页面转换之间不起作用？还是您只是试图将 div 从左向右移动？
我正在使用 react router 在其他组件之间切换
如果你在路由之间切换，你必须在 AnimatePresence 上设置 exitBeforeEnter 让上一页动画首先出现 - framer.com/api/motion/animate-presence/…

标签： reactjs exit framer-motion unmount

【解决方案1】：

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

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

在你的情况下是<motion.div>

我这里有一些 AnimatePresense 的例子

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

【讨论】：

第二个沙箱帮了我！谢谢@Joshua Wootonn
伙计，你真的把我从头痛中救了出来，非常感谢