framer motion 中组件卸载时无法触发出场动画，根本原因是缺少 `animatepresence` 包裹和唯一 `key` 属性——本文详解其原理、正确用法及常见误区。
在 Framer Motion 中，exit 动画（即组件从 DOM 中移除前的过渡动画）不会自动生效，即使你已完整定义了 initial、animate 和 exit 属性。这是因为 React 的渲染机制本身不提供“组件即将卸载且允许异步延迟”的生命周期钩子——而退出动画恰恰依赖这一能力：组件需在动画完成后再真正从树中移除。
要启用退出动画，必须满足两个缺一不可的前提条件：
✅ 1. 使用 <AnimatePresence> 包裹动态渲染的 motion 组件
AnimatePresence 是 Framer Motion 提供的专用容器组件，它会监听其子元素的挂载/卸载状态，并为带有 exit 属性的 motion 元素触发退出动画，同时阻塞真实卸载直到动画结束。
✅ 2. 为每个可能退出的 motion 子元素显式设置唯一 key 属性
AnimatePresence 依靠 key 来追踪元素的身份。若 key 缺失、重复或静态不变（如固定字符串 "item"），动画将无法正确识别新旧状态，导致 exit 被忽略。
以下是正确实现的最小可运行示例：
import { AnimatePresence, motion } from "framer-motion";
function App() {
const [isVisible, setIsVisible] = useState(true);
return (
<div>
<button onClick={() => setIsVisible(!isVisible)}>
{isVisible ? "Hide" : "Show"}
</button>
{/* ✅ 必须包裹 AnimatePresence */}
<AnimatePresence>
{isVisible && (
// ✅ key 必须存在且在条件变化时唯一（推荐使用稳定 ID 或布尔值转字符串）
<motion.div
key="content" // 或更健壮的写法：key={`content-${isVisible}`}
initial={{ opacity: 0, y: -500 }}
animate={{ opacity: 1, y: 0, scale: 0.9 }}
exit={{ opacity: 0, y: -500, transition: { duration: 0.3 } }} // 可选：自定义退出过渡
>
Very Code...
</motion.div>
)}
</AnimatePresence>
</div>
);
}⚠️ 关键注意事项：
- AnimatePresence 不能用于全局布局（如整个页面根节点），而应精准作用于需要退出动画的局部条件渲染区域；
- key 值必须随组件存在状态变化而改变——若渲染多个列表项，请使用数据 ID（如 item.id），而非索引（index），避免重排时 key 错位导致动画异常；
- exit 动画默认使用 animate 中定义的 transition，但可单独通过 exit={{ ... , transition: { duration: 0.2 } }} 覆盖；
- 若组件通过 display: none 或 CSS 类隐藏（而非条件渲染），AnimatePresence 无法捕获卸载事件，退出动画同样不会触发。
总结：Framer Motion 的退出动画不是“开箱即用”特性，而是需主动启用的受控行为。牢记 AnimatePresence + unique key 这一黄金组合，即可稳定实现平滑的进入/退出交互动效。
