Framer Motion 的 exit 动画为什么不生效？

照南~ 提问于 2026-03-03 08:19:21 阅读 133

交互

我用 Framer Motion 做了个列表，想在删除项时加个淡出动画，但 exit 动画完全没反应。明明已经给组件加了 layout 和 animate，也用了 AnimatePresence 包裹，咋回事？

这是我的代码：

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

function ItemList({ items }) {
  return (
    <AnimatePresence>
      {items.map(item => (
        <motion.div
          key={item.id}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          layout
        >
          {item.name}
        </motion.div>
      ))}
    </AnimatePresence>
  );
}

CSS动画交互设计动画效果

我来解答赞 6 收藏

反馈

1 条解答

令狐宁馨 Lv1

这个问题我遇到过，是Framer Motion的一个常见坑。你的代码看起来没问题，但漏了关键一点：AnimatePresence需要看到组件被移除才会触发exit动画。

你的ItemList组件每次渲染时items数组都是新的引用，但React的reconciliation过程可能不会真正移除DOM节点。解决方法有两个：

1. 确保父组件正确处理了状态更新，比如用filter而不是直接修改原数组：

const [items, setItems] = useState(initialItems);

const removeItem = (id) => {

  setItems(items.filter(item => item.id !== id));

}

2. 可以优化成更简洁的写法，给AnimatePresence加个mode="popLayout"属性，这样它能更好地检测到组件卸载：

<AnimatePresence mode="popLayout">

  {items.map(item => (

    // 原有motion.div代码

  ))}

</AnimatePresence>

另外吐槽下，Framer Motion的文档把这个藏得挺深，我第一次用也折腾了半天。

2026-03-05 10:00