Vue過渡transition實現輪播組件

        輪播組件的使用非常廣泛，與前寫的swiper不同，這個組件實現的是自動輪播的功能。先上效果圖：

        縱向滾動的輪播一般適用於一些信息的滾動展示

        橫向滾動的輪播一般適用於banner圖的變換

        這種組件寫起來也其實也不算複雜，但是用Vue的transition組件會更加簡單。

1、Vue過渡組件transition

        簡單介紹一下Vue的過渡組件transition，更詳細的請看文檔。

        Vue 提供了 transition 的封裝組件，可以在條件渲染（v-if）和條件展示（v-show）時，爲任何元素和組件添加進入/離開的過渡效果。列表的過渡使用transition-group組件，使用tag屬性來指定呈現的元素。

過渡的類名

        在進入/離開的過渡中，會有 6 個 class 切換：v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to。通過爲<transition>添加name屬性，可以實現自定義的類名。

JavaScript鉤子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

2、輪播的代碼實現

        使用<transition-group>並指定tag="ul"來渲染列表，<li>元素中使用currentIndex === index來判斷元素是否展示。<img-scroll-item>組件是輪播的內容，這個例子中就是一張圖片。

<div class="acs_img-scroll" v-if="myList && myList.length">
    <transition-group
    tag="ul"
    class='ac_scroll-ul'
    name="list"
    @after-leave="autoPlay">
        <li
            class="ac_scroll-item"
            v-for="(item, index) in myList"
            :key="index"
            v-show="currentIndex === index"
            @click="click($event, item)">
                <img-scroll-item
                    :scrollItem="filterItem(item)">
                </img-scroll-item>
        </li>
    </transition-group>
</div>

        監測after-leave事件，在元素離開後改變currentIndex的值，來展示下一個元素。

autoPlay() {
    setTimeout(() => {
        this.currentIndex++;
        if (this.currentIndex > this.list.length - 1) {
            this.currentIndex = 0;
        }
    }, 2000);
},

        進入時，元素的偏移從100%過渡到0，離開時，從0過渡到-100%，橫向滾動使用translateX，縱向滾動則translateY。

.acs_img-scroll{
    height: 100%;
    overflow: hidden;
    .ac_scroll-ul{
        position: relative;
        .ac_scroll-item {
            position: absolute;
        }
        .list-enter-to {
            transition: all 2s ease;
            transform: translateX(0);
        }
        .list-leave-active {
            transition: all 2s ease;
            transform: translateX(-100%)
        }
        .list-enter {
            transform: translateX(100%)
        }
        .list-leave {
            transform: translateX(0)
        }
    }
}

        以上就是全部代碼了，非常簡單就實現了輪播效果。