CSS 过渡实现仿旋转木马效果

思路: 定义一个数组,存数个class类名,对应类名定义位置等样式,5秒一个定时器,将存放class类名的数组最后一个元素移动到第一个,因为有过度效果,所以有动画效果

html

 <div class="icon-layout">
    <div class="icon-item" :class="icon_position[index]" v-for="(item ,index) in 6">
        <div class="info">{{index + 1}}</div>
    </div>
</div>

 样式数组

icon_position: ['icon-item-1', 'icon-item-2', 'icon-item-3', 'icon-item-4', 'icon-item-5', 'icon-item-6']

定时器 

this.icon_position = this.icon_position.reverse()
const timer = setInterval(() => {
  this.icon_position.unshift(this.icon_position.pop())
}, 5000)

this.$once('hook:beforeDestroy', () => {
  clearInterval(timer)
})

定义过度动画 

transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;