vue-使用transition-group实现轮播图

在仿马蜂窝的项目中，尝试使用transition-group实现轮播图

布局

<transition-group tag="ul" name="imgs">

<li v-for="(item, index) in imgArray" :key="index" v-show="index===mark">

<a href="#/imgInfo/1"><img :src="item" alt=""></a>

</li>

</transition-group>

关键样式：

.imgs-enter-active ,

.imgs-leave-active {

transition: all 1s ease;

}

.imgs-enter {

transform: translateX(100%);

}

.imgs-enter-to {

transform: translateX(0);

}

.imgs-leave {

transform: translateX(0);

}

.imgs-leave-to {

transform: translateX(-100%);

}

定时器回调函数的内容，主要是实现mark的值的增长。

this.mark+=1;

if (this.mark === this.imgArray.length ) {

this.mark =0;

通过mark控制哪一个li显示出来