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

Question

[vetsmen]

<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) никакой анимации не происходит. Почему? И как исправить это?

Answer 1

[Dima Polos]

Проставьте элементам аттрибут key.
https://ru.vuejs.org/v2/guide/transitions.html
Найдите там подзаголовок про переключение элементов, и в красной рамке будет комментарий. Без key для watchera как бы нет изменений, а когда у элементов есть разные keys, то видно изменение, и происходит анимация.

Answer 2

[Виктор Янышев]

transition: opacity ease .5s;