vue 数据大屏 跑马灯 滚动列表展示 滚动+暂停

需要的功能：数据自动无缝隙播放滚动，鼠标移动上去：停止滚动，鼠标移开：接着滚动
框架：vue

最终效果：

逻辑：

1：列表使用ul>li展示
2：使用两个ul实现无缝衔接功能
3：使用动画实现跑马灯功能
4：使用mouseenter+mouseleave实现鼠标控制滚动功能

代码

template:

 <div class="title">
            <span class="name">XXXXXX销售排行榜span>
          div>
          <div class="list_box">
            <div class="table_title">
              <span>序号span><span>公司名称span><span>金额span>
            div>
            <div id="scroll_box" ref="scroll_box" class="list anim" @mouseenter="stopAn" @mouseleave="leaveAn">
              <ul ref="list1">
                <li v-for="(item,i) in 11" :key="i" :class="{bg:(i%2==0)?true:false}">
                  <div class="NO" :style="{backgroundColor:i==0?'red':i==1?'#ea6318':i==2?'#e2a21b':'#3ab8b6'}"><span>{{i+1}}span>div>
                  <span class="name">2X安徽晋盛东区（直营）马鞍山市南超长超出超长超出超长span>
                  <span class="num">331.22span>
                li>
              ul>
              <!-注意这个ul就是上面ul的复制体哦，除了ref不一样，其他都跟上面一样哦-->
              <ul ref="list2">
                <li v-for="(item,i) in 11" :key="i" :class="{bg:(i%2==0)?true:false}">
                  <div class="NO" :style="{backgroundColor:i==0?'red':i==1?'#ea6318':i==2?'#e2a21b':'#3ab8b6'}"><span>{{i+1}}span>div>
                  <span class="name">2X安徽晋盛东区（直营）马鞍山市南超长超出超长超出超长span>
                  <span class="num">331.22span>
                li>
              ul>
            div>
          div>

less:

.title {
      margin-top: 24px;
      border-bottom: 2px solid #39b8b6;
      padding-bottom: 11px;
      .name {
        font-size: 17px;
        color: #fff;
        font-weight: 500;
      }
    }
    .list_box {
      background-color: #0b1d27;
      .anim {
        &:hover {
          cursor: pointer;
        }
      }
      .table_title {
        font-size: 14px;
        color: #757e83;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 55px;
        height: 55px;
        padding: 0 14px;
        box-sizing: border-box;
      }
      .list {
        height: 390px;
        overflow: hidden;
        ul {
          -webkit-animation: 5s move infinite linear;//动画开始
          li {
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
            line-height: 60px;
            padding: 0 14px;
            box-sizing: border-box;
            .NO {
              background-color: #3ab8b6;
              width: 20px;
              height: 20px;
              box-sizing: border-box;
              text-align: center;
              border-radius: 50%;
              // position: relative;
              span {
                font-size: 10px;
                font-weight: 500;
                line-height: 20px;
                display: block;
              }
            }
            .name {
              font-size: 14px;
              width: 194px;
              overflow: hidden;
              text-overflow: hidden;
              word-break: keep-all;//名称超出不换行，隐藏
              white-space: nowrap; /* 不换行 */
            }
          }
          .bg {
            background-color: #0c2c36;
            height: 30px;
            line-height: 30px;
          }
        }

        @-webkit-keyframes move {
          0% {
            transform: translate(0, 0);
          }
          100% {
            transform: translate(0, -100%);
          }
        }

        @keyframes move {
          0% {
            transform: translate(0, 0);
          }
          100% {
            transform: translate(0, -100%);
          }
        }
      }
    }

script:

   // 接着动画
    leaveAn() {
      this.$refs.list1.style.animationPlayState = "running";
      this.$refs.list2.style.animationPlayState = "running";
    },
    // 暂停动画
    stopAn() {
      this.$refs.list1.style.animationPlayState = "paused";
      this.$refs.list2.style.animationPlayState = "paused";
    },

踩过的坑：

1:原本是使用css的 ul:hover停止动画，但是因为做了无缝衔接使用两个ul，鼠标放上去的时候只会停止一个动画，另一个ul还会接着滚动，于是最后使用js来控制动画播放和停止。
2：弄清楚mouseleave和mouseout，前者是监听该元素的鼠标移出，后者该元素所有子元素都能触发鼠标移出事件。
3：原先是使用定时器+scrollHeight来实现滚动的，但是几百毫秒一直scrollHeight++，界面会抖，如果设置一秒增加固定高度的话，也不是我想要的平滑滚动的效果，最后还是使用动画香。