vue实现列表过渡
Vue 列表过渡的实现方法
Vue 提供了 <transition-group> 组件来实现列表过渡效果，适用于动态渲染的列表项（如 v-for）。以下是具体实现方式：
基本用法
使用 <transition-group> 包裹列表，设置 name 属性定义过渡类名前缀：
<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: all 0.5s ease;
}
.list-enter-from, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}排序动画
添加 .list-move 类实现排序过渡：
.list-move {
transition: transform 0.5s ease;
}进阶配置
通过 JavaScript 钩子实现更复杂的动画：
<transition-group
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<!-- 列表项 -->
</transition-group>methods: {
beforeEnter(el) {
el.style.opacity = 0
},
enter(el, done) {
gsap.to(el, {
opacity: 1,
duration: 0.5,
onComplete: done
})
}
}注意事项
- 必须为每个列表项设置唯一的
:key - 默认渲染为
<span>，可通过tag属性修改 - 对于复杂动画可结合 GSAP 等动画库
- 列表变化时会有
v-move类自动应用
通过以上方法可以实现平滑的列表添加、删除和排序动画效果。
