Vue.js: анимация переходной группы не работает

Question

У меня есть ползунок, записанный как компонент группы перехода:

<template>
 <div class="carousel-view">
  <transition-group name="carousel-transition" class="carousel" tag="div">
   <div v-for="(slide, index) in slides"
       :key="index"
       class="slide">
    <div>{{ slide.status }}</div>
    <img :src="slide.img" />
   </div>
  </transition-group>
 <div class="carousel-control">
   <button @click="goToPrevious" class="button button__main">Back</button>
   <button @click="goToNext" class="button button__main">Next</button>
  </div>
 </div>
</template>

В моем <style> У меня есть это:

<style lang="scss" scoped>
.carousel {
 overflow: hidden;
 display: inline;
 height: 100%;
 width: 900px;
 min-width: 200px;
 text-align: center;
}
.slide {
 display: inline-block;
 position: relative;
 z-index: 10;
}
.slide:first-of-type, .slide:last-of-type {
 opacity: 0.5;
 position: absolute;
}
.slide:first-of-type {
 right: 50%;
 z-index: 5;
}
.slide:first-of-type {
 right: 50%;
 z-index: 5;
}
.slide:last-of-type {
 left: 50%;
 z-index: 5;
}
.carousel-transition-move {
  transition: transform 1s;
}
</style>

У меня есть две функции в моих методах длязаставить мои слайды двигаться:

goToNext() {
  const firstSlide = this.slides.shift();
  this.slides = this.slides.concat(firstSlide);
},
goToPrevious() {
  const lastSlide = this.slides.pop();
  this.slides = [lastSlide].concat(this.slides);
},

Все мои слайды в настоящее время являются просто жестко заданным массивом в компоненте data() с тремя объектами, содержащими изображение и некоторый статус.Прямо сейчас я не могу анимировать слайды, ни после нажатия кнопок, вызывающих эти функции, ни после установки интервала.Что я делаю неправильно?

Answer 1

Видимо, проблема была в том, что вы использовали :key="index", тогда как vue выдает подсказку для этого в консоли.

[Vue tip]: не используйте v-for index в качестве ключа для дочерних элементов, это то же самое, что не использовать ключи.

Поэтому я изменил :key на slide.status, и это сработало.

Вот рабочий JsFiddle

Надеюсь, это поможет!