今天在上慕課老師fishenal的vue實戰課程的時候，有一個輪播圖元件實現，在跟著做的時候，自己也踩了一些坑。此外，在原課程案例的基礎上，我加入了不同方向的滑動功能。

本文章採用Vue結合Css3來實現輪播圖。

首先要了解的是Vue的動畫原理。在vue中，如果我們要給元素設定動畫效果，則需要使用一個<transition name="targetClassName"></transition>將相應的元素包裹住，如下：

<transition name="imgShouldMove">
  <img v-if="shouldShow" src="/1.jpg">
</transition>
 

之後，便可以在.imgShoudMove中設定動畫屬性了，如下:

.imgShouldMove-enter{
  transition: all 0.5s;
}
.imgShouldMove-enter-active{
  transform:translateX(900px);
}

注意在HTML中，這裡<img>有一個v-if="shoudShow"屬性。shouldShow這個屬性是在data(){}中設定的，當shouldShow從false-->true時（即img從無到突然出現時），Vue動畫原理將動畫分為了 shouldShouldMove-enter 和 imgShouldMove-enter-active 兩個階段。

我本人對其的理解為，其中 shouldShouldMove-enter 表示動畫開始的初始狀態， imgShouldMove-enter-active 這表示動畫的終止狀態。而動畫的觸發則是通過if-show引起的。

如下圖

瞭解了這些之後，我就可以開始著手實現輪播圖元件了。

首先是HTML程式碼：

<template>
  <div class="carousel" @mouseenter="clearInv()" @mouseleave="runInterval()">
    <div class="imgBox">
      <a :href="pics[currentIndex].href">
        <transition v-bind:name="'carousel-trans-' + direction + '-old'">
        <!-- isShow: false -> true
        取反後: true -> false(從顯示到消失) -->
          <img v-if="!isShow" :src="pics[currentIndex].src">
        </transition>
        <transition v-bind:name="'carousel-trans-' + direction ">
        <!-- isShow: false -> true -->
        <!-- 從消失到顯示 -->
          <img v-if="isShow" :src="pics[currentIndex].src">
        </transition>
      </a>
    </div>
    <h2>{{pics[currentIndex].title}}</h2>
    <ul class="pagination">
      <li v-for="(item, index) in pics" @click="goto(index)" :class="{active:index === currentIndex}">{{index + 1}}</li>
    </ul>
    <div class="prevBtn" @click="goto(prevIndex)"><i class="iconfont"></i></div>
    <div class="nextBtn" @click="goto(nextIndex)"><i class="iconfont"></i></div>
  </div>
</template>
 

Script程式碼：

<script>
export default {
  props:{
    pics:{
      type:Array,
      default:[]
    },
    timeDelta:{
      type:Number,
      default:2000
    }
  },
  data () {
    return {
      currentIndex:0,
      isShow:true,
      direction:'toleft'
    }
  },
  computed:{
    prevIndex(){
      this.direction = 'toleft'
      if (this.currentIndex <= 0) {
        return this.pics.length - 1
      }
      return this.currentIndex - 1
    },
    nextIndex(){
      this.direction = 'toright'
      if (this.currentIndex >= this.pics.length - 1) {
        return 0
      }
      return this.currentIndex + 1
    }
  },
  methods:{
    goto(index){
      this.isShow = false
      setTimeout(()=>{
        this.isShow = true
        this.currentIndex = index
      },10)
      
    },
    runInterval(){
      this.direction = 'toright'
      this.timer = setInterval(()=>{
        this.goto(this.nextIndex)
      },this.timeDelta)
    },
    clearInv(){
      clearInterval(this.timer)
    }
  },
  mounted(){
    this.runInterval()
  }

}
</script>

與動畫相關的css程式碼如下

.carousel-trans-toright-enter-active,.carousel-trans-toright-old-leave-active{
  transition:all 0.5s;
}
.carousel-trans-toright-enter{
  transform:translateX(940px); //新圖片從右側940px進入
}
.carousel-trans-toright-old-leave-active{
  transform:translateX(-940px);  //老圖片向左側940px出去
}
.carousel-trans-toleft-enter-active,.carousel-trans-toleft-old-leave-active{
  transition:all 0.5s;
}
.carousel-trans-toleft-enter{
  transform:translateX(-940px); //新圖片從右側940px進入
}
.carousel-trans-toleft-old-leave-active{
  transform:translateX(940px);  //老圖片向左側940px出去
}

---------------以下為解釋說明-------------
注意：對於<img>需要放在<box>裡面，<box>需要設定為position:relative; 而<img>必須設定為position:absolute; 這步非常非常重要，否則每次莫名其妙的總是隻有一張圖片顯示。
在每次切換的時候，都要觸發goto()方法，將this.isShow先置false，10毫秒後，this.isShow置true。這時，html中的<transition>被觸發，它與css相結合觸發動畫效果，持續時間為css屬性中的transition所定的0.5s。

在向前、向後切換的時候，使用到了計算屬性，在div.prevBtn以及div.nextBtn上，我們作了點選事件繫結，觸發方法goto(),而傳入的正是計算屬性prevIndex， @click="goto(prevIndex)"

計算屬性的設定方法如下：

computed:{
    prevIndex(){ 
      //經過一番計算過程得出result
      return result //這個值即<template>中的prevIndex
    }
  },

每隔2秒自動滑動時，我們向left滑動，在data中，設定了變數 direction ，它的值要麼為字串'toleft'，要麼為'toright'。

我們在計算屬性中對 this.direction 進行了設定，並在<template>中對相應的name進行了字串拼接，如下

<transition v-bind:name="'carousel-trans-' + direction ">

在vue中，除了class和style可以傳入物件、陣列，其他的屬性繫結必須進行字串拼接。