Vue转场使用不当？

Question

我有一个元素通过每 3 秒换出 img 的 src 作为图像轮播：

JS

data() {

 return {

  carousel: {

    images: [
      "/images/beauty.png",
      "/images/dance.png",
      "/images/funny.png",
      "/images/sweet.png"
    ],
    currentNumber: 0,
    timer: null 
  }   
 } 
}

methods: {
  startRotation: function() {
    this.carousel.timer = setInterval(this.next, 3000);
  },
  next: function() {
    this.carousel.currentNumber += 1
  }
}

标记

<div class="grid__slide">
  <div class="grid__slide-inner" v-for="number in [carousel.currentNumber]">
    <transition
      name="ease-out-transition"
      leave-active-class="fadeOut"
      mode="out-in"
      >
      <img :src="carousel.images[Math.abs(carousel.currentNumber) % carousel.images.length]">
    </transition>
  </div>
</div>

CSS

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

除包装 img 元素的过渡外，所有功能均正常运行。关于为什么它无效的任何建议？

Answer 1

正如在第 "Transitioning Between Elements" in the documentation about <transition>, you need to add a :key 章元素中解释的那样，尝试在相同类型的多个元素之间进行转换。

<img
    :src="carousel.images[Math.abs(carousel.currentNumber) % carousel.images.length]"
    :key="Math.abs(carousel.currentNumber) % carousel.images.length"
>

之所以需要这样做是因为没有 key 属性，Vue 会尝试优化应用程序的速度，而不是交换图像元素，它只是将 src 属性更改为指向你的新形象。

Vue转场使用不当？

improper use of Vue transition?

javascript

transition

vue.js

vuejs2