动画与 v-for

添加和删除元素

当删除其他元素之间的元素时，其他元素将落入被删除元素所在的位置。 为了动画显示删除元素后其余列表项如何就位，我们将使用自动生成的 v-move 类。

但首先，让我们看一个示例，其中没有在删除元素时以动画方式显示其他项目如何就位:

示例

App.vue:

正如您在上面的示例中看到的，当删除某个项目时，删除的项目后面的项目会突然跳到新位置。 为了在删除某个项目时为其余项目设置动画，我们使用自动生成的 v-move 类。

v-move 类在被移除的项目离开时对其他元素进行动画处理，但有一个问题:被移除的项目仍然存在并占据位置，直到它被移除为止。 删除了，所以 v-move 类不会有任何影响。 为了给 v-move 类提供一些动画，我们可以将 position: absolute; 设置为 v-leave-active 类。 当在移除期间设置 position: absolute; 时，移除的项目仍然可见，但不占据位置。

在此示例中，与上一个示例的唯一区别是第 14 行和第 17 行添加了两个新的 CSS 类:

示例

App.vue:

更大的示例

让我们使用上面的示例作为新示例的基础。

在此示例中，当添加或删除新项目或对整个数组进行排序时，整个列表的动画效果将变得更加清晰。

在这个例子中我们可以:

• 通过点击删除项目
• 对项目进行排序
• 在列表中的随机位置添加新项目

示例

App.vue:

Vue 练习

< tag="ol">
  

    {{ x }}
  
>