实现一个无限循环滚动的列表

通过js定时器+css过渡 实现一个Vue2版本的无限循环滚动的列表，经常用于可视化大屏数据的滚动展示

HTML

   <div style="height: 305px;overflow: hidden;">
      <div :class="{ anim: animate === true }">
        <div v-for="(item,index) in lists" :key="index" class="container">
          <span>{{ item }}</span>
        </div>
      </div>
    </div>

JS

export default {
	data() {
    return {
     	lists: [
        	'您现在看到的',
       		'是一个',
        	'无限循环的',
        	'滚动的',
        	'不借助插件实现的',
        	'vue2版本的列表示例',
        	'如果喜欢',
        	'请三连谢谢'
     	 ],
    	}
    },
    mounted() {
	 this.intervalId = setInterval(this.scroll, 1500)
	},
 	beforeDestroy() {
    	clearInterval(this.intervalId)
  	},
  	
  	methods: {
    	scroll() {
	    	this.animate = true
      		setTimeout(() => {
       			this.lists.push(this.lists[0])
        		this.lists.shift()
        		this.animate = false
      		}, 500)
    	},
   }
}

CSS

.container{
  margin-bottom: 4px;
  width: 500px;
  height: 35px;
  color: #fff;
}
.anim{
  transition: all 0.5s;
  margin-top: -41px;
}