在仿马蜂窝的项目中,尝试使用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显示出来