Vuejs 2 从数组中移除（拼接）而不是动画过渡

Question

我有一个 vue 组件：

<transition-group name="list">
  <task v-for="task in tasks" v-bind:key="task.id" v-bind:task="task" class="list-task"></task>
</transition-group>

简单转换：

.list-task {
  transition: all 0.5s;
}

当我使用 unshift 将元素添加到 tasks 数组时，我得到了一个漂亮的动画，其中现有元素向下滑动以为新元素腾出空间。

但是，当我使用 splice 从数组中删除一个元素时，该元素突然消失了。

如何让它像添加元素一样动画化？

Answer 1

您可能忘记指定转换类。这会给你一个基本的淡出：

.list-leave-active {
  transition: all 0.5s;
  opacity: 0;
}

请参阅 Transition Classes 上的（优秀）文档。

Vuejs 2 removing from array (splice) not animating with transition