vue使用transition-group实现图片轮播效果

css样式

.banner{
  position: relative;
}
.list-item{
  width: 100%;
  position: absolute;
}
.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%);
}

js代码

    mounted() {
                this.startTimer()
    },
    methods: {
        startTimer: function(){
            this.timer = setInterval(this.autoPlay, 5000);//用定时器控制每张图的显示时间
        },
        autoPlay(){
            this.bannerIndex = this.bannerImgs.length === (this.bannerIndex+1) ? 0 : (this.bannerIndex+1)
        }
        }