Vue.js：过渡组动画不起作用答案

【问题标题】：Vue.js: transition-group animation doesn't workVue.js：过渡组动画不起作用
【发布时间】：2019-08-15 20:15:32
【问题描述】：

我有一个写成转换组组件的滑块：

<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() 中的一个硬编码数组，其中三个对象包含一个图像和一些状态。现在我无法为幻灯片制作动画，也无法在单击调用这些功能的按钮后，也无法设置间隔。我究竟做错了什么？

【问题讨论】：

老兄！我检查过相同的代码，不知何故它对我有用！这是JsFiddle 试图找出哪里出了问题
哦，这让我发疯了，但感谢您的检查。我会试着弄清楚发生了什么。
如果你能把所有的代码/创建相同的代码和框，我可以看看！
@varit05 谢谢！这是代码：jsfiddle.net/n1uv7e0x
这是有效的：jsfiddle.net/varit05/26mL80fb 检查并确认。

标签： javascript css vue.js transition vuejs-transition-group

【解决方案1】：

显然，问题在于您使用的是:key="index"，而vue 在控制台中为此提供了一个提示。

[Vue 提示]：不要在 children 上使用 v-for index 作为 key，这和不使用 key 是一样的。

因此我将 :key 更改为 slide.status 并且它起作用了。

这是工作的JsFiddle

希望这会有所帮助！

【讨论】：

啊，是的，成功了！非常感谢！另一个 Vue 特性被揭示了。 :)