Пытаюсь разобраться анимацией в vue.js, есть компонент, отражающий в себе элемент слайдера изображений, соответственно необходим анимированный переход между несколькими такими. Без анимации все работает прекрасно, картинки перелистываются в нужном порядке, так что насчет логики тут в целом все окей. Исходя из документации vue.js я написал следующий кусок кода:
<transition name="fade">
<slide-item v-if="state == 'first'"
:url="sources[number]"
@next="next"
>
</slide-item>
<slide-item v-else-if="state == 'second'"
:url="sources[nextNumber]"
@next="next"
>
</slide-item>
</transition>
Все анимации я прописал отдельно:
.fade-enter {
}
.fade-enter-active {
animation: fadeIn .3s linear;
}
.fade-leave {
}
.fade-leave-active {
animation: fadeOut .3s linear;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
Но, переходов я не увидел никаких, и никаких от слова вообще.
Самое интересное, что если я создам точно такой же компонент, к примеру, slide-item-1, с такими же свойствами, стилями и т.д. (то есть абсолютного клона slide-item) и вставлю его вместо второго slide-item, то анимации заработают.
Но так делать совершенно глупо, т.к. из-за этого происходит дублирование не просто куска кода, а в целом всего компонента. Неужели во vue нельзя анимировать разные экземпляры одного и того же компонента?
Простой
