vue notice消息通知往上无限滚动效果

1.html

      <ul class="new-list" :class="{anim:animate}" @mouseenter="stop" @mouseleave="up">
            <li v-for="(item, i) in noticeList" :key="i" style="fontSize:.28rem;">
             {{item.val}}
            </li>
      </ul>

2.js

 noticeList: [
        {
          val: 123
        },
        {
          val: 1234
        },
        {
          val: 12345
        },
      ],
 mounted () {
    this.scrollUp()
  },
 methods: {
    scrollUp () {
      this.intNum = setInterval(() => {
        this.animate = true// 向上滚动的时候需要添加css3过渡动画
        setTimeout(() => {
          this.noticeList.push(this.noticeList[0])// 将数组的第一个元素添加到数组的
          this.noticeList.shift() // 删除数组的第一个元素
          this.animate = false
        }, 500)
      }, 3000)
    },
    // 鼠标移上去停止
    stop () {
      clearInterval(this.intNum)
    },
    up () {
      this.scrollUp()
    }



css
 .new-list{
        line-height: 28px;
        transition: top 0.5s;
    }
    .anim{
        transition: all 0.5s;
        margin-top: -28px;//高度等于行高
    }