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

Question

I have a vue component:

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

With a simple transition:

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

When I add an element to the tasks array with unshift I get a nice animation, where the existing elements are sliding down to make room for the new element.

However, when I remove an element from the array with splice, that element just just suddenly disappears.

How can I make it animate out like with adding an element?

Answer 1

You probably forgot to specify the transition classes. This will give you a basic fade-out:

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

Please refer to the (excellent) docs on Transition Classes.