framer motion 中组件卸载时无法触发出场动画，根本原因是缺少 `animatepresence` 包裹和唯一 `key` 属性——本文详解其原理、正确用法及常见误区。
在 Framer Motion 中，exit 动画（即组件从 DOM 中移除前的过渡动画）不会自动生效，即使你已完整定义了 initial、animate 和 exit 属性。这是因为 React 的渲染机制本身不提供“组件即将卸载且允许异步延迟”的生命周期钩子——而退出动画恰恰依赖这一能力：组件需在动画完成后再真正从树中移除。
要启用退出动画，必须满足两个缺一不可的前提条件：
✅ 1. 使用
AnimatePresence 是 Framer Motion 提供的专用容器组件，它会监听其子元素的挂载/卸载状态，并为带有 exit 属性的 motion 元素触发退出动画，同时阻塞真实卸载直到动画结束。
✅ 2. 为每个可能退出的 motion 子元素显式设置唯一 key 属性
AnimatePresence 依靠 key 来追踪元素的身份。若 key 缺失、重复或静态不变（如固定字符串 "item"），动画将无法正确识别新旧状态，导致 exit 被忽略。
闪灵CMS企业建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用PHP+MYSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建站方案。
以下是正确实现的最小可运行示例：
import { AnimatePresence, motion } from "framer-motion";
function App() {
const [isVisible, setIsVisible] = useState(true);
return (
{/* ✅ 必须包裹 AnimatePresence */}
{isVisible && (
// ✅ key 必须存在且在条件变化时唯一（推荐使用稳定 ID 或布尔值转字符串）
Very Code...
)}
);
}⚠️ 关键注意事项：
- AnimatePresence 不能用于全局布局（如整个页面根节点），而应精准作用于需要退出动画的局部条件渲染区域；
- key 值必须随组件存在状态变化而改变——若渲染多个列表项，请使用数据 ID（如 item.id），而非索引（index），避免重排时 key 错位导致动画异常；
- exit 动画默认使用 animate 中定义的 transition，但可单独通过 exit={{ ... , transition: { duration: 0.2 } }} 覆盖；
- 若组件通过 display: none 或 CSS 类隐藏（而非条件渲染），AnimatePresence 无法捕获卸载事件，退出动画同样不会触发。
总结：Framer Motion 的退出动画不是“开箱即用”特性，而是需主动启用的受控行为。牢记 AnimatePresence + unique key 这一黄金组合，即可稳定实现平滑的进入/退出交互动效。
