@Bezlepkin
Yii, PHP, JS, Android

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

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

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

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


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

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

https://jsfiddle.net/8m2qtbzx/
  • Вопрос задан
  • 138 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Заменяем 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/042sqzgy/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@architawr
"Ok, Google" и все твои проблемы решены
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Enapter Санкт-Петербург
от 160 000 до 240 000 ₽
Ready for Sky Санкт-Петербург
от 120 000 до 160 000 ₽
28 февр. 2020, в 11:33
1000 руб./за проект
28 февр. 2020, в 11:29
1000 руб./за проект
28 февр. 2020, в 11:25
3000 руб./за проект