Задать вопрос
@vetsmen
javascript

Почему не работает анимация во Vue.js?

<transition name="contr">
		<div v-if="prepare">
		</div>
		<div v-else-if="item">
		</div>
	</transition>

.contr-enter-active, .contr-leave-active {
	  transition: opacity .5s;
	}
	.contr-enter, .contr-leave-to {
	  opacity: 0;
	}

При переходе между этими двум состояниями (меняется prepare и item) никакой анимации не происходит. Почему? И как исправить это?
  • Вопрос задан
  • 2526 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
dimovich85
@dimovich85 Куратор тега CSS
https://u-academy.net/
Проставьте элементам аттрибут key.
https://ru.vuejs.org/v2/guide/transitions.html
Найдите там подзаголовок про переключение элементов, и в красной рамке будет комментарий. Без key для watchera как бы нет изменений, а когда у элементов есть разные keys, то видно изменение, и происходит анимация.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
villiwalla
@villiwalla
HTML-верстка
transition: opacity ease .5s;
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Скорректировать 3d модель в Maya autodesk
23 апр. 2024, в 15:45
10000 руб./за проект
Сделать Appsflyer ATT и всю Аналитику
23 апр. 2024, в 15:42
5000 руб./за проект
Услуги архитектора-проектировщика
23 апр. 2024, в 15:34
10000 руб./за проект
Ещё заказы