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;
}

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

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

如何像添加元素一样制作动画？

Answer 1

您可能忘了指定过渡类。这将给你一个基本的淡出：

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

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