Как в VUE анимировать удаление из реактивного DOM?

Question

[Игорь Безлепкин]

Привет!Подскажите такую штуку.

Есть реактивный DOM:

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

Я прописываю второму элементу класс, а потом через секунду удаляю и реактивного DOM. Получается что второй элемент удаляется из реактивного дома и мой класс переносится на третий элемент.

Мне по-сути нужно сделать удаление с анимацией...

https://jsfiddle.net/8m2qtbzx/

Comments

[Модератор]

Для комментирования ответа жмите линк "Комментировать" под ответом
Не нужно писать комментарий в форме для ответа
Оповещения о такой реплике не поступит автору ответа

Не нужно засорять секцию ответов "спасибовсем", "решено" и тп

Answer 1

[0xD34F]

Заменяем ol на 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>

И добавляем стили:

li {
  transition: all 0.7s;
}

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

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

https://jsfiddle.net/8j5ygb7n/

Answer 2

[Артур Карапетян]

тык?

Comments

[Игорь Безлепкин]

а как с li то работать?

[Артур Карапетян]

Игорь Безлепкин, List-Transitions

Answer 3

[Игорь Безлепкин]

Вот так тоже переносится https://jsfiddle.net/jk8tm7yw/