纵向的走马灯，有停顿效果

代码备忘录
实现了列表数据一条一条向上移动，每移动一条数据停一下

思路

一开始想用属性的，但是发现，这样一来初始化的时候会空出一个可见div的高度，第一条数据才姗姗来迟，而且没有实现每移动一条数据停顿一下的效果。现在使用anim来控制，scroll（）方法第一步打开animate开关，并且每隔一秒将数组的第一个元素添加到数组的最后一位，再删除数组的第一个元素，最后再关闭animate开关，在赋值数组时用定时器每2秒调用一次scroll（）方法。
另加了鼠标移入暂停，移出继续移动

<div class="query_showCon_main_table_main" @mouseover="mouseover" @mouseout="mouseout">
	<div class="marquee" :class="{anim:animate==true}" v-if="!auto">
	  <div class="marqueeItem" v-for="(item,index) in tableList" :key="index">
	    <div class="marqueeItem_Info" :title="'第'+item.rank+'名'">{{item.rank}}</div>
	    <div class="marqueeItem_Info" :title="item.area_name">{{item.area_name}}</div>
	    <div class="marqueeItem_Info" :title="item.zhaopin_name">{{item.zhaopin_name}}</div>
	    <div class="marqueeItem_Info" :title="item.zhaopin_code">{{item.zhaopin_code}}</div>
	    <div class="marqueeItem_Info" :title="item.score+'分'">{{item.score}}</div>
	    <div class="marqueeItem_Info" :title="item.score_devide+'分'">{{item.score_devide}}</div>
	  </div>
	</div>
</div>

//鼠标移入
mouseover(){
  clearInterval(this.flag)
},
//鼠标移出
mouseout(){
   if(this.ListLength>9){
     this.flag = setInterval(this.scroll,2000)
   }
 },
scroll(){
      this.animate=true;
      setTimeout(()=>{      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.tableList.push(this.tableList[0]);  // 将数组的第一个元素添加到数组的最后一位
        this.tableList.shift();               //删除数组的第一个元素
        this.animate=false;
      },1000)
    },
    //获取最新50条数据
    getNewList(){
      getList(this.year).then(res=>{
        if(res.data){
          this.tableList = res.data
          this.ListLength = res.data.length
          if(this.ListLength>9){    //高度限制只能看见9条数据
            setInterval(this.scroll,2000)
          }
        }
      })
    },

//anim来控制向上移动
.anim{
  transition: all 1s;  //过渡时长1秒
  margin-top: -60px;
}



&_main {
     width: 100%;
     height: 540px;
     overflow: hidden;
     .marquee{
       height: 540px;
       .marqueeItem{
         width: 100%;
         height: 60px;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
         &_Info{
           color: rgb(50, 103, 182);
           text-align: center;
           cursor: pointer;
           overflow:hidden;
           text-overflow:ellipsis;
           white-space:nowrap;
           width: 100%/6;
           height: 60px;
           line-height: 60px;
         }
       }
     }
   }