vue3中transition-group的使用

最近在写一个列表的动画时，使用了transition-group组件，期间遇到一些原来没有注意的东西，特此记录下来。

动画class名称变化

在vue2中，动画class如图所示：

在vue3中，动画class 如图所示：

可以看到v-enter变成了v-enter-from，v-leave变成了v-leave-from。

在使用vue3时需要注意class名称的变化。

动画效果实现

需要实现的动画效果如下：

首先编写template模版：

<input type="text" v-model="title" @keydown.enter="addTodo" />
<ul v-if="todos.length">
      <transition-group name="flip-list" tag="ul">
        <li v-for="(todo, index) in todos" :key="todo.title">
          <input type="checkbox" v-model="todo.done" />
          <span :class="{ done: todo.done }"> {{ todo.title }}</span>
          <span  @click="removeTodo($event, index)"> ❌ </span>
        </li>
      </transition-group>
</ul>

要对使用 v-for渲染的列表使用动画，就必须使用 <transition-group> 组件了。

这个组件有如下几个特点：

1. 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag更换为其他元素，这里我们用了ul元素。
2. 内部元素 总是需要 提供唯一的 key 属性值，不能使用index作为key，因为当你删除某项时，index会变化导致动画永远发生在最后一个元素身上，而不是当前元素，切记切记。
3. css 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

接着，添加css类：

.flip-list-enter-active,
.flip-list-leave-active {
  transition: all 0.5s ease;
}
.flip-list-enter-from,
.flip-list-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

这样就大功告成了，那看看效果吧：

看着还不错，但是有个问题，就是当我删除2时，后面的元素3,4会往上移动，但是这个移动是生硬的，是瞬间的，没有一个动画，这与我们需要达到的动画效果有差距。

幸好，transition-group还提供了一个class名称v-move，这个class可以改变定位，它会在元素的改变定位的过程中应用。因此，我们需要加上如下css：

.flip-list-move {
  transition: transform 0.8s ease;
}
.flip-list-leave-active {
  position: absolute;
}

注意，一定要在flip-list-leave-active中加上position: absolute;，否则动画也不会生效。

这样就达到想要的动画效果。

总结

需要注意两点：

1. key一定不能使用index，必须使用一个唯一值
2. 必须加上v-move这样动画更加协调