vue2.x 实现新闻消息向上无缝滚动效果

目前要达到的效果是 新闻逐条向上滚动，但是又不想引入第三方插件，所以需要自己实现啦。

template中代码如下：

<div :class="{anim:animate}" @mouseenter="stop()" @mouseleave="up()">
  <div class="news_name" v-for="item in newsList" :key="item.id" @click="handleClick(item)">
   {{ item.name }} 
  </div>
 </div>

javascript代码如下

export default {
      name:'newsList',
      data(){
        return {
          timer: null,
          animate: false,
          newsList:[
            {"id":1,"name":"河北省财政厅关于印发"},
            {"id":2,"name":"河北省财政厅关于印发Redmi K30 5G"},
            {"id":3,"name":"河北省财政厅关于印发小米CC9 Pro"},
            {"id":4,"name":"河北省财政厅关于印发Redmi 8",},
            {"id":5,"name":"河北省财政厅关于印发Redmi 8A"},
            {"id":6,"name":"河北省财政厅关于印发Redmi Note8 Pro"},
            {"id":7,"name":"河北省财政厅关于印发Redmi Note8"},
            {"id":8,"name":"河北省财政厅关于印发Redmi Note8"}  
          ]
        }
    },
    mounted() {
      this. this.scrollUp(); // 开启滚动效果
    },
    methods:{
      // 查看详情
      handleClick(item) { 
        this.$router.push({path:'/newsDetail',query:{id: item.id }})
      },
      // 滚动动画
      scrollUp() {
        this.timer = setInterval(() => {
          this.animate = true;// 向上滚动的时候需要添加动画
          setTimeout(()=>{
            this.newsList.push(this.newsList[0]);// 将数组的第一个元素添加到数组最后一个
            this.newsList.shift(); // 删除数组的第一个元素
            this.animate = false;
          },500)
        }, 5000);
      },
      //鼠标移上去停止
      stop() {
        clearInterval(this.timer);
      },
      //鼠标离开继续
      up() {
        this.scrollUp();
      },
    },
    // 销毁定时器
    beforeDestroy() {
      this.stop()
    }
  }

css 代码如下

.news_name {
        line-height: 30px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        transition: top 0.5s;
 }
 .anim{
      transition: all 0.5s;
      margin-top: -30px; 
  }