Framer Motion 退出动画失效的完整解决方案

framer motion 中组件卸载时无法触发出场动画，根本原因是缺少 `animatepresence` 包裹和唯一 `key` 属性；本文详解其原理、正确用法及常见陷阱。

在 Framer Motion 中，exit 动画（即组件从 dom 中移除前的过渡动画）不会自动生效，即使你已正确配置了 initial、animate 和 exit 属性。这是因为 React 的渲染机制本身不提供“组件即将卸载且允许异步等待”的生命周期钩子——而退出动画恰恰需要这种能力：组件必须在动画完成后再真正从 DOM 中移除。

要启用退出动画，必须满足两个缺一不可的前提条件：

1. ✅ 将需动画退出的组件包裹在 中；
2. ✅ 该组件（及其同级兄弟组件，如存在多个条件渲染项）必须拥有稳定且唯一的 key 属性。

是 Framer Motion 提供的专用容器组件，它会监听其子元素的挂载/卸载状态，并在检测到带有 key 的元素被移除时，暂停 React 的默认卸载流程，触发其 exit 动画；待动画 onAnimationComplete 后，才真正执行卸载。

以下是正确实现示例：

import { AnimatePresence, motion } from "framer-motion";  function App() {   const [isVisible, setIsVisible] = useState(true);    return (     
        setIsVisible(!isVisible)}>         {isVisible ? "Hide" : "Show"}               {/* ✅ 关键：必须用 AnimatePresence 包裹 */}                {isVisible && (           // ✅ 关键：必须设置唯一且稳定的 key                        Very Code...                    )}            
   ); }

⚠️ 常见错误与注意事项：

• 错误 1：遗漏 AnimatePresence
  即使 exit 配置完整，没有 AnimatePresence，exit 将完全被忽略——组件会立即卸载，无任何动画。

• 错误 2：缺失或无效的 key
  key 必须是字符串类型，且在同一 AnimatePresence 内唯一且稳定。避免使用 math.random()、date.now() 或数组 index（尤其在列表重排时易导致 key 冲突或复用，破坏动画逻辑）。

• 错误 3：在非条件渲染场景下误用
  AnimatePresence 仅对因 React 条件渲染（如 &&、ternary、map）导致的挂载/卸载生效。若通过 CSS display: none 或 visibility: hidden 控制显隐，则属于状态切换，应使用 animate + transition，而非 exit。

• 进阶提示：自定义退出完成回调
  可通过 onExitComplete 属性监听退出动画结束：

   console.log("Exit finished!")} />

总结：Framer Motion 的退出动画不是“开箱即用”的特性，而是依赖 AnimatePresence + key 的显式契约。理解这一设计背后对 React 渲染模型的补充逻辑，是写出可预测、高性能交互动画的关键基础。