Vue 教程：使用 TransitionGroup 实现列表增删排序的平滑动画

在 Vue 应用中，列表数据的增删与排序是高频交互场景。若直接操作 DOM，元素会瞬间出现或消失，视觉体验生硬。TransitionGroup 组件正是为解决这一问题而生，它能为列表中的每个元素在插入、移除或移动时自动应用过渡动画，显著提升界面流畅度与交互质感。适用场景包括动态表单、消息通知列表、购物车商品排序等。使用前需确保项目已安装 Vue 3（或 Vue 2.6+ 版本），并了解 v-for 指令的基本用法。

核心概念与原理

TransitionGroup 是 Vue 内置的过渡组件，与 Transition 不同，它专门用于渲染整个列表。其核心机制是：当列表数据发生变化时，Vue 会对比新旧虚拟 DOM，识别出被新增、删除或移动的元素，并自动为其添加对应的过渡类名。移动动画通过 FLIP 技术实现，即记录元素移动前后的位置差，利用 transform 属性进行平滑位移，从而避免触发昂贵的重排操作。

实战步骤与代码

以下示例演示如何用 TransitionGroup 实现一个可增删、可排序的待办事项列表。

1. 创建基础页面：引入 Vue 并初始化一个包含列表数据的实例。

<div id="app">
  <button @click="addItem">添加</button>
  <button @click="shuffle">随机排序</button>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item.id" @click="removeItem(item.id)">
      {{ item.text }}
    </li>
  </transition-group>
</div>
<script> const { createApp } = Vue; createApp({ data() { return { items: [ { id: 1, text: '学习 Vue' }, { id: 2, text: '写教程' }, { id: 3, text: '发布文章' } ] }; }, methods: { addItem() { const id = Date.now(); this.items.push({ id, text: '新任务 ' + id }); }, removeItem(id) { this.items = this.items.filter(item => item.id !== id); }, shuffle() { this.items.sort(() => Math.random() - 0.5); } } }).mount('#app'); </script>

2. 定义过渡样式：为列表项设置进入、离开和移动动画。

<style>
.list-enter-active, .list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-move {
  transition: transform 0.5s ease;
}
</style>

关键点说明：name 属性定义了过渡类名的前缀；tag 属性指定渲染的根元素标签；每个列表项必须绑定唯一的 :key，这是动画正确触发的必要条件。添加数据时，新元素会以淡入和位移方式出现；删除时，其他元素会平滑补位；排序时，元素通过 transform 实现流畅的移动效果。

常见坑点与优化

坑点一：忘记设置 key。若未给列表项绑定唯一 key，Vue 无法准确追踪元素身份，动画将失效或产生错乱。务必使用稳定的唯一标识，避免使用索引作为 key。

坑点二：离开动画不生效。在列表中，离开动画需要配合 position: absolute 才能让其他元素正确补位。建议在 .list-leave-active 中设置绝对定位。

坑点三：性能问题。当列表数据量较大（如超过千条）时，频繁的动画可能造成卡顿。建议对大数据列表进行虚拟滚动优化，或减少不必要的动画时长。

优化建议：合理使用 appear 属性让初始渲染也带有过渡效果；将动画时长控制在 0.3s 至 0.6s 之间，兼顾视觉流畅与响应速度。

总结

TransitionGroup 是 Vue 提供的高效动画解决方案，通过简单的配置即可实现列表增删排序的平滑过渡。掌握其核心原理与常见坑点，能帮助开发者在实际项目中快速构建优雅的交互体验。