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 上的（优秀）文档。