Vue的Transition组件子元素动画没反应怎么办？

Des.欣龙提问于 2026-02-12 17:40:28 阅读 114

交互

在用Vue的v-for循环列表时，给transition组件设置了name和mode，但删除元素时只有第一个元素有动画，其他子元素直接消失，这是为啥啊？

代码是这样的：

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>

CSS写了.list-enter-active和.list-leave-active，连transition属性都设置了，但开发者工具显示其他元素根本没有过渡样式，只有第一个元素生效了，这到底是哪里出问题了？

CSS动画动画效果

我来解答赞 4 收藏

反馈

1 条解答

萌新.怡然 Lv1

你这问题我之前也踩过坑，根本原因是用了 transition-group 但子元素没包一层独立的 transition。transition-group 只是给整个列表容器加过渡状态，真正要让每个 item 有完整的进入和离开动画，得靠里面的元素自己触发。

你的代码现在只写了 .list-enter-active 和 .list-leave-active，但漏了 enter-from/leave-to 这些初始状态，而且最关键的是：li 元素本身没有设置 key 和独立的包裹结构来支撑逐个动画。

我的做法是把每个 li 包一层 transition，或者更简单点 —— 直接在 transition-group 里确保每个子项都有正确的类名过渡体系。比如这样改：

<transition-group name="list" tag="ul">

  <li 

    v-for="item in items" 

    :key="item.id"

    class="list-item"

  >

    {{ item.text }}

  </li>

</transition-group>

然后 CSS 要补全所有阶段：

.list-enter-active,

.list-leave-active {

  transition: all 0.5s ease;

}

.list-enter-from {

  opacity: 0;

  transform: translateY(-30px);

}

.list-leave-to {

  opacity: 0;

  transform: translateX(30px);

}

/* 注意：这里 leave-to 结束后元素才被移除 */

还有一点容易忽略：必须给每个 li 加唯一的 :key，你虽然加了，但确认下 item.id 真的是唯一且稳定不变的？如果 id 是索引或者会变的，Vue 就没法追踪元素，动画也会错乱。

最后检查浏览器开发者工具里的元素样式，在删除时看看其他 li 有没有加上 list-leave-active 这种类名，如果没有，说明 transition-group 没正确触发每个节点的生命周期，大概率就是 key 不对或者结构问题。

试试看，一般补上 enter-from 和 leave-to 就好了。

2026-02-12 18:01