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。