当前位置：首页 > VUE

vue实现轮播动画

2026-02-17 10:10:50VUE

Vue实现轮播动画的方法

使用Swiper组件

Swiper是一个流行的轮播库，支持Vue集成。安装Swiper后，可以通过配置实现动画效果。

npm install swiper vue-awesome-swiper

示例代码：

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(item, index) in slides" :key="index">
      <img :src="item.image" alt="">
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      slides: [{ image: 'image1.jpg' }, { image: 'image2.jpg' }],
      swiperOptions: {
        autoplay: { delay: 3000 },
        effect: 'fade',
        loop: true
      }
    }
  }
}
</script>

自定义CSS动画

通过Vue的过渡系统结合CSS动画实现轮播效果。使用<transition>或<transition-group>包裹轮播元素。

<template>
  <div class="carousel">
    <transition-group name="slide" tag="div">
      <div v-for="(item, index) in slides" :key="index" v-show="current === index">
        <img :src="item.image" alt="">
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      slides: [{ image: 'image1.jpg' }, { image: 'image2.jpg' }]
    }
  },
  mounted() {
    setInterval(() => {
      this.current = (this.current + 1) % this.slides.length
    }, 3000)
  }
}
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: opacity 1s, transform 1s;
}
.slide-enter {
  opacity: 0;
  transform: translateX(100%);
}
.slide-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
</style>

使用第三方动画库

结合Animate.css或GSAP等动画库增强轮播效果。安装Animate.css后，直接在过渡类名中引用。

npm install animate.css

示例代码：

vue实现轮播动画

<template>
  <transition
    enter-active-class="animate__animated animate__fadeInRight"
    leave-active-class="animate__animated animate__fadeOutLeft"
  >
    <img v-if="show" :src="currentImage" @click="next">
  </transition>
</template>

<script>
import 'animate.css'
export default {
  data() {
    return {
      show: true,
      currentIndex: 0,
      images: ['image1.jpg', 'image2.jpg']
    }
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex]
    }
  },
  methods: {
    next() {
      this.show = false
      setTimeout(() => {
        this.currentIndex = (this.currentIndex + 1) % this.images.length
        this.show = true
      }, 500)
    }
  }
}
</script>