数据大屏可视化，列表自动循环滚动动画实现

展示列表自动循环滚动播放动画效果：

通过animation动画实现：

<div ref="scrollBox">
 <div style="overflow: hidden">
  <div class="scroll-box">
     <ProjectList ref="scrollRef"></ProjectList>//两个列表进行循环
     <ProjectList v-if="isNeedScroll"></ProjectList>//列表高度小于容器高度不显示，不循环
  </div>
 </div>
</div>

 scss通过v-bind绑定动画时间

@keyframes scrolltop {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);//第一个列表循环完一次，然后重新循环第一个列表
  }
}
.scroll-box {
  width: 100%;
  animation: scrolltop v-bind(scrollTime) linear infinite;//0ms没有动画效果
}

 判断列表是否需要循环

var scrollRef = ref();
var scrollBox = ref();
var scrollTime = ref("0ms");
var isNeedScroll = ref(false);
onMounted(() => {
  isNeedScroll.value =
    scrollBox.value.offsetHeight - 30 <
    proxy.$refs["scrollRef"].$refs["listHeight"].clientHeight;//判断列表高度是否大于容器高度，大于则为true，scrollBox为容器ref
  isNeedScroll.value == true ? (scrollTime.value = "8000ms") : "0ms";//通过动画时间控制知否执行动画，列表高度小于容器高度，不需要循环
});