vue实现列表过渡

vue实现列表过渡的方法

在Vue中，可以使用内置的<transition-group>组件来实现列表项的过渡效果。该组件专门为动态列表设计，能够处理元素的添加、删除和顺序变化。

基本用法

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

.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

关键属性说明

• name：定义过渡类名的前缀
• tag：指定渲染的HTML标签，默认为span
• move-class：自定义移动过渡的类名
• appear：是否在初始渲染时应用过渡

排序动画实现

当列表顺序变化时，Vue会自动应用移动过渡。可以通过CSS控制移动效果：

.list-move {
  transition: transform 0.5s;
}

高级配置示例

结合Animate.css库实现复杂动画：

<transition-group
  name="custom-classes-transition"
  enter-active-class="animated bounceIn"
  leave-active-class="animated bounceOut"
  tag="div"
>
  <!-- 列表项 -->
</transition-group>

注意事项

1. 必须为每个列表项设置唯一的key
2. 过渡模式不可用（不同于<transition>的mode属性）
3. 移动动画依赖于CSS的transform属性
4. 性能考虑：大量元素过渡时可能需要优化

动态高度处理

对于高度不固定的元素，可以使用JavaScript钩子计算精确的过渡效果：

beforeEnter(el) {
  el.style.height = '0'
},
enter(el, done) {
  const height = el.scrollHeight
  el.style.height = height + 'px'
  done()
}