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

Question

[Михаил Власов]

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

Answer 1

[Artem0071]

Вот тут ваше решение

Обычно требуется только один блок оборачивать в transition, а вы пытаетесь туда два впихнуть. Просто разделите их на два транзита и все

Comments

[Klein Maximus]

Вполне можно оба блока в один transition.

Artem0071 по Вашей же ссылке но второй пример

<transition>
  <button v-if="isEditing" key="save">
    Сохранить
  </button>
  <button v-else key="edit">
    Редактировать
  </button>
</transition>

Answer 2

[Klein Maximus]

Если нужно плавное появление, но незачем использовать animation - достаточно простого transition.
Просто нужно либо проставлять position: absolute, чтобы компоненты накладывались друг на друга и не прыгали, либо указать mode="out-in" - Режимы переходов.