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。