vue轮播图淡入淡出效果

以下是一个使用Vue实现淡入淡出效果的轮播图例子：

template>
  <div class="slider">
    <transition-group name="fade" tag="div">
      <div :key="currentIndex">
        <img :src="images[currentIndex]" alt="">
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      images: [
        'https://picsum.photos/id/237/200/300',
        'https://picsum.photos/id/238/200/300',
        'https://picsum.photos/id/239/200/300'
      ]
    }
  },
  mounted() {
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.images.length
    }, 2000)
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在这个例子中，我们使用了Vue的`<transition-group>`组件来实现淡入淡出效果。`<transition-group>`组件会在子元素发生变化时自动应用过渡效果。我们将要轮播的图片放在一个`<div>`元素中，并将其绑定到`<transition-group>`组件上。在CSS中，我们定义了`.fade-enter-active`和`.fade-leave-active`类来设置过渡效果，同时使用`.fade-enter`和`.fade-leave-to`类来设置元素的初始和结束状态。