Vue transition-group 列表过渡

使用 transition-group 为列表添加进入、离开和移动动画，提升用户体验。 · 难度：入门 · +15XP

transition-group 概述

<transition-group> 用于为列表中的多个元素添加动画效果，支持进入（enter）、离开（leave）和移动（move）三种状态。与 <transition> 不同，它需要指定 tag 属性来渲染一个真实的 DOM 容器。

基本用法

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

CSS 类名

与 transition 类似，过渡类名由 name 属性决定：list-enter-active、list-leave-active、list-move 等。

.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;
}

移动动画关键

当列表顺序改变时，Vue 通过 FLIP 技术计算元素位置变化，添加 v-move 类来实现平滑移动。

练习提示

1. 创建一个可添加/删除项的列表。
2. 为列表项添加进入、离开和移动动画。