Vue 过渡实现轮播图效果

Vue 过渡实现轮播图效果攻略

什么是 Vue 过渡

Vue 过渡是在添加/删除元素，或者显示/隐藏元素时，添加动画效果的机制。Vue 在添加/删除元素时，为元素添加了一些 CSS 类名，你可以在 CSS 中为这些类名设置相应的样式，达到过渡效果的目的。

实现轮播图效果

基于 Vue 过渡的轮播图

在基于 Vue 过渡的轮播图中，我们会使用到 Vue 的内置组件 transition。

首先，我们定义一个轮播图组件 Carousel，并在组件内部定义一个数组 images，用于存储轮播图图片的路径。

<template>
  <div class="carousel">
    <transition name="fade">
      <img :src="currentImage" :key="currentImage">
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        "https://placeimg.com/640/480/animals",
        "https://placeimg.com/640/480/arch",
        "https://placeimg.com/640/480/nature",
      ],
      currentIndex: 0,
    };
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex];
    },
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

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

在 transition 中，设置了 name 属性，用于指定过渡效果的名称。CSS 类名中包含了该名称，例如 transition-enter-active 等。

在 CSS 中，我们为 fade-enter-active 和 fade-leave-active 设置了 transition 属性，表示在元素进入和离开时，透明度属性的过渡效果应该持续 0.5 秒。

同时我们还为 fade-enter 和 fade-leave-to 设置了 opacity 属性，表示元素进入时透明度设置为 0，元素离开时透明度设置为 0。

基于 Vue 动画钩子的轮播图

Vue 还提供了一些动画钩子，可以在动画过程中执行一些操作。我们可以使用这些钩子来实现自定义的动画效果。

同样地，首先，我们定义一个轮播图组件 Carousel，并在组件内部定义一个数组 images，用于存储轮播图图片的路径。

<template>
  <div class="carousel">
    <img :src="currentImage" :key="currentImage" v-bind:class="{ slide: isSliding }">
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        "https://placeimg.com/640/480/animals",
        "https://placeimg.com/640/480/arch",
        "https://placeimg.com/640/480/nature",
      ],
      currentIndex: 0,
      isSliding: false,
    };
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex];
    },
  },
  methods: {
    slide() {
      this.isSliding = true;
      setTimeout(() => {
        this.isSliding = false;
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
      }, 500);
    },
  },
  mounted() {
    setInterval(this.slide, 3000);
  },
};
</script>

<style>
.slide {
  animation: slide-in 0.5s ease-out forwards;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
</style>

我们在 Carousel 中增加了一个方法 slide，用于在动画结束后切换轮播图。

在动画过程中，我们为元素添加 slide 类名，并定义了相应的 CSS 动画。

总结

以上是 Vue 实现轮播图的两种方式，基于 Vue 过渡和基于 Vue 动画钩子。在实现过程中，两种方式都可以通过 CSS 来定义具体的过渡效果。根据需求选择合适的方式即可。