页面数据轮播展示，鼠标经过取消轮播

//arr为页面数据，格式为：arr:[{label:'星期一'}，{label:'星期二'}，{label:'星期三'}，{label:'星期四}]
//我的是超过三条才轮播，根据自己实际情况调整
  <ul @mouseenter="enterBlock($event)" @mouseleave="leaveBlock($event)">
        <li
          v-for="(item, index) in arr"
          :key="index"
          class="flex"
          :class="arr.length > 3 ? 'scroll-box' : ''"
        >
            <h5>{{ item.label}}</h5>
        </li>
 </ul>


js:
    enterBlock(event) {
      event.target.querySelectorAll(".scroll-box").forEach(function (element) {
        element.classList.add("pause");
      });
    },
    leaveBlock(event) {
      event.target.querySelectorAll(".scroll-box").forEach(function (element) {
        element.classList.remove("pause");
      });
    },

css:
ul{
    max-height: 204px;
    overflow: hidden;
}
li{
    height:60px;
    line-height:60px
}
// 页面数据滚动样式
@keyframes scroll {
  0% {
    transform: translateY(0); /* 初始位置 */
  }
  100% {
    transform: translateY(-100%); /* 向上滚动 100% 的高度 */
  }
}
.scroll-box {
  animation: scroll 3s linear infinite normal;
}
.pause {
  animation-play-state: paused;
}