本文共 1151 字，大约阅读时间需要 3 分钟。

一、深入剖析列表过渡

1.过渡_列表过渡

当想要给一个列表添加过渡动效时，我们可以使用 <transition-group> 组件。

//App.vue
   

//BaseLevel1
   

该组件的特点：

• 不同于 ，它会以一个真实元素呈现：默认为一个 。你也可以通过 tag attribute 更换为其他元素。
• 过渡模式不可用，因为我们不再相互切换特有的元素。
• 内部元素 总是需要 提供唯一的 key 属性值。
• CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

2.列表的排序过渡

<transition-group> 组件提供了一个新的特性：v-move，它会在元素改变定位的过程中应用。

注意：当移除一个列表元素时，需要将移除的元素脱离文档流，否则，要溢出的元素在移除过渡中一直处于文档流中，会影响到后面元素的move过渡效果。

内部的实现：Vue 使用了一个叫 FLIP 简单的动画队列，使用 transforms 将元素从之前的位置平滑过渡新的位置。

需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中。

3.列表的交错过渡

如果要给列表中的元素，应用更丰富的过渡效果，可以配合JavaScript钩子。