How to animate removal from reactive DOM in VUE?

Question

Vue.js

Hello! Tell me such a thing.
There is a reactive DOM:

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

I give the second element a class, and then a second later I remove the reactive DOM as well. It turns out that the second element is removed from the reactive house and my class is transferred to the third element.
I basically need to do the removal with animation...
https://jsfiddle.net/8m2qtbzx/

Answer 1

Replace olwith transition-group:

<transition-group tag="ol" name="todo">
  <li
    v-for="(todo, i) in todos"
    :key="todo.id"
    @click="todos.splice(i, 1)"
  >{{ todo.text }}</li>
</transition-group>

And add styles:

li {
  transition: all 0.7s;
}

.todo-leave-active {
  position: absolute;
}

.todo-leave-to {
  transform: translateX(500px);
  opacity: 0;
}

https://jsfiddle.net/8j5ygb7n/

Answer 2

poke?

Answer 3

This is how it is also transferred https://jsfiddle.net/jk8tm7yw/