Vue 2 中实现列表项排序动画的核心是使用<transition-group>组件配合唯一key、move特性及CSS过渡；需确保key稳定、启用move、定义.list-move等过渡类，并用数组变异方法（如sort）直接修改原数组。
Vue 2 中实现列表项排序动画，核心是使用 <transition-group> 组件配合 key 和 CSS 过渡类，再结合 move 特性触发自动位移动画。
1. 基础结构：用 transition-group 包裹 v-for 列表
<transition-group> 是 Vue 提供的专门用于列表过渡的内置组件，它不会渲染真实 DOM 元素（默认渲染为 span），但会保留子元素的顺序和 key 信息，是实现排序动画的前提。
确保每个列表项有**稳定且唯一**的 key（推荐用数据 id，不要用 index）：
<transition-group name="list" tag="ul">
<li v-for="item in list" :key="item.id" class="list-item">
{{ item.name }}
</li>
</transition-group>2. 启用 move 特性并添加 CSS 过渡
Vue 2.2+ 支持 move 特性，当列表顺序变化时，Vue 会自动计算元素的起始/结束位置，并对正在移动的元素添加 v-move 类（或你自定义的 name-move 类）。
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
关键点：
- 必须给
<transition-group>添加move特性（如:move="{ duration: 300 }"） - CSS 中需定义
.list-move（对应name="list"），且必须含transform: translate()和transition - 列表项自身也要有过渡（如入场/离场），例如
.list-enter-active、.list-leave-active
.list-move {
transition: transform 0.3s ease;
}
.list-enter-active, .list-leave-active {
transition: all 0.3s ease;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(20px);
}3. 排序逻辑：直接修改数组（不替换整个数组）
Vue 能检测到数组的变异方法（如 sort()、reverse()、splice()）。只要用这些方法改变原数组，move 就会生效。
✅ 正确（触发 move）：
methods: {
sortByPrice() {
this.list.sort((a, b) => a.price - b.price); // 原地排序
}
}❌ 错误（不触发 move）：
this.list = [...this.list].sort(...); // 创建新数组，失去位置追踪
4. 注意事项与常见问题
排序动画依赖 Vue 对 DOM 节点的复用和位置计算，以下情况会导致 move 失效：
- 列表项没有设置
key，或key不稳定（如用 index 或 Math.random()） - 未启用
move特性，或 CSS 中缺少.xxx-move的 transform + transition - 列表容器或父元素设置了
overflow: hidden，裁剪了过渡中的位移效果 - 使用了
v-if替代v-show控制显隐，导致节点被销毁重建，无法参与 move
