Framer-motion 退出动画未触发

Question

https://codesandbox.io/s/framer-motion-not-working-id46n?file=/src/Notifications.tsx

As you can see in this gif，通知在从 DOM 中删除后不会执行退出动画。（它们在生成后分别获得 6 秒）。为什么？

我已经完成了其他答案中提到的所有内容，例如：

为每个通知子节点添加一个唯一键
<Routes location={location} key={location.pathname}>
等等

为什么不起作用？

目标： 获取通知以在被删除时播放一些退出动画（即在指定的通知持续时间之后）

Answer 1

现有元素需要直接 <AnimatePresence> 标签的子元素。

您的沙箱不在此处运行，因此我无法验证解决方案，但如果您将结构更改为：

，它应该可以工作

<AnimatePresence>
  <NotificationContext>
    <div id="notificationCenter">
      <motion.div key={notification.id} />
    </div>
  </NotificationContext>
</AnimatePresence>

对此：

<NotificationContext>
  <div id="notificationCenter">
    <AnimatePresence>
      <motion.div key={notification.id} />
    </AnimatePresence>
  </div>
<NotificationContext>

Framer-motion 退出动画未触发

Framer-motion exit animation not firing

typescript

reactjs

framer-motion