vue transition做轮播图

<transition name="fade-slide">
   轮播图部分的代码
</transition>

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

**v-enter：**定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

**v-enter-active：**定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

**v-enter-to：**2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

**v-leave：**定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

**v-leave-active：**定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

**v-leave-to：**2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

轮播图组件slide.vue的代码

<template>
  <div class="slide">
    <div class="carousel-place">
      <transition name="fade-slide">
        <img :src="item.src" v-for="(item,index) in slides" v-if="index == currentIndex" :key="index" @mouseenter="stop"
          @mouseleave="go" @click="gopage">
      </transition>
    </div>
    <div class="slide-page">
      <ul>
        <li @click="prevImage">&larr;</li>
        <li v-for="(item, index) in slides" @mouseover="goto(index)">
          <a>{{ index + 1 }}</a>
        </li>
        <li @click="nextImage">&rarr;</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      slides: {
        type: Array,
        default: []
      },
    },
    data () {
      return {
        currentIndex: 0,
        slideName: "fade-slide",
        timer: ''
      }
    },
    methods: {
      gopage() {
        this.$router.push({
           name:'detail',
           params:{
             goodkey:index
          }
       })
      },
      go() {
        this.timer = setInterval(() => {
          this.autoPlay()
        }, 4000)
      },
      stop() {
        clearInterval(this.timer)
        this.timer = null
      },
      goto(index) {
        this.currentIndex = index
      },
      autoPlay() {
        this.currentIndex++
        if (this.currentIndex > this.slides.length - 1) {
          this.currentIndex = 0
        }
      },
      prevImage() {
        if (this.currentIndex === 0) {
          this.currentIndex = this.slides.length - 1
        } else {
          this.currentIndex--
          this.slideName = "fade-rslide"
        }
      },
      nextImage() {
        if (this.currentIndex === this.slides.length - 1) {
          this.currentIndex = 0
        } else {
          this.currentIndex++
          this.slideName = "fade-slide"
        }
      }
    },
    mounted() {
      this.timer = setInterval(() => {
        this.autoPlay()
      }, 4000)
    }
  }
</script>

<style>
  .slide {
    width: 100%;
    height: 15rem;
    margin: 0 auto;
   /* border: 1px solid #000000 ; */
  }
  .carousel-place{
    position: relative;
    width: 100%;
    height: 15rem;
  }
  .carousel-place img {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 15rem;
    position: absolute;
  }
  .fade-slide-enter-active {
    transition: all 2s ease
  }
  .fade-slide-leave-active {
    transition: all 2s ease
  }
  .fade-slide-enter {
    opacity: 0;
    transform: translateX(100px);
  }
  .fade-slide-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }
  .slide-page {
   width: 100%;
   height: 3rem;
   position: absolute;
   background-color: grey;
   opacity: 0.7;
   top: 17rem;
  }

  .slide-page ul {
    margin: 0;
    padding: 0;
    line-height: 50px;

  }

  .slide-page li {
    list-style: none;
    float: left;
    cursor: pointer;
    margin: 0 10px;
    color: white;
  }
</style>

主页导入组件轮播图组件

<template>
  <!-- 轮播图区块 -->
  <div class="index-wrap">
    <slide-show :slides="slides"></slide-show>
  </div>
</template>

<script>
  import axios from 'axios'
  import slideShow from "@/components/swiper/slide.vue"
  export default {
    components: {
      slideShow
    },
    data() {
      return {
        slides: [{
            "id": 0,
            "clickUrl": "#",
            "desc": "1",
            "src": "../../static/image/1.jpg"
          },
          {
            "id": 1,
            "clickUrl": "#",
            "desc": "2",
            "src": "../../static/image/2.png"
          },
          {
            "id": 2,
            "clickUrl": "#",
            "desc": "3",
            "src": "../../static/image/3.jpg"
          }
        ]
      }
    },
    mounted() {

    }
  }
</script>

<style>
  .index-wrap {
    overflow: hidden;
  }
</style>