Framer Motion退出动画失效求助：元素移除DOM时无动画效果

Framer Motion的exit动画不会自动生效，核心原因是必须用AnimatePresence组件包裹需要触发退出动画的元素——它负责追踪元素的挂载/卸载状态，没有它的话，元素被移除时Framer Motion根本不知道要执行退出动画。

另外还要满足两个关键条件：

• 被包裹的motion元素必须设置唯一的key属性，让Framer Motion能精准识别每个元素的状态变化
• 元素的卸载必须通过条件渲染（比如{isVisible && <motion.div />}）实现，不能用display: none这类仅隐藏元素的方式

修改后的代码示例 #

import { motion, AnimatePresence } from "framer-motion";

// 假设用状态控制元素显示/隐藏
const [isVisible, setIsVisible] = useState(true);

return (
  <AnimatePresence>
    {isVisible && (
      <motion.div 
        key="unique-content-key" // 必须设置唯一key
        initial={{opacity: 0, y: -500}} 
        animate={{opacity: 1, y: 0, scale: 0.9}} 
        exit={{opacity: 0, y: -500}}
      >
        Very Code...
      </motion.div>
    )}
  </AnimatePresence>
);

你之前用useRef的.mount()方法没用，因为exit动画的触发完全依赖AnimatePresence提供的上下文，手动挂载/卸载元素绕开了这个机制，自然不会触发动画。

内容的提问来源于stack exchange，提问作者Yeider Peña