vue实现列表动画
使用 <transition-group> 实现列表动画
Vue 提供了 <transition-group> 组件专门用于列表动画。与 <transition> 不同，它会渲染为真实的 DOM 元素（默认为 <span>），可以通过 tag 属性修改为其他标签。
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>定义动画样式
通过 CSS 定义进入、离开和移动时的过渡效果。以下示例使用 transform 和 opacity 实现平滑过渡：
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
}
/* 列表重新排序时的动画 */
.list-move {
transition: transform 0.5s ease;
}动态列表操作
在 Vue 实例中管理列表数据，通过方法添加/删除元素触发动画：
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' }
]
}
},
methods: {
addItem() {
this.items.push({ id: Date.now(), text: 'New Item' });
},
removeItem(index) {
this.items.splice(index, 1);
}
}使用 FLIP 动画优化性能
对于复杂列表，Vue 内部使用 FLIP (First-Last-Invert-Play) 技术优化动画性能。确保为每个列表项设置唯一的 :key，这是高效动画的必要条件。
第三方动画库集成
可以结合 animate.css 等库实现更丰富的效果：
<transition-group
enter-active-class="animate__animated animate__fadeInUp"
leave-active-class="animate__animated animate__fadeOutDown"
tag="div"
>
<!-- 列表项 -->
</transition-group>排序动画示例
通过改变数组顺序触发元素位置动画：
shuffleItems() {
this.items = _.shuffle(this.items); // 使用 lodash 打乱顺序
}注意：确保 CSS 中包含 .list-move 类定义移动过渡效果。
