Whiled0S
@Whiled0S
Ленивый фронтенд

Можно ли анимировать один компонент на vue.js?

Пытаюсь разобраться анимацией в 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 нельзя анимировать разные экземпляры одного и того же компонента?
  • Вопрос задан
  • 73 просмотра
Пригласить эксперта
Ответы на вопрос 2
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы