vue实现文本上下循环滚动

前言

页面上有两块公告，需要循环滚动，最初使用animation实现了，但如果两块公告的条数不一致的话，就会导致两块公告滚动的快慢不同，由此需要换种方式实现，使两块公告始终以同样的快慢节奏滚动。

第一种方式：animation实现（存在两块公告滚动的快慢不同的问题）

<!-- 公告1 -->
<div class="report-text>
	<!-- 大于3条 -->
	<ul v-if="list.length > 3" class="list">
        <li v-for="(item, index) in list" :key="'list'+index">{
  {item.name}}</li>
    </ul>
    <!-- 小于于3条 -->
    <ul v-else>
       <li v-for="(item, index) in list" :key="'list'+index">{
  {item.name}}</li>
    </ul>
</div>
<!-- 公告2-->
<div class="report-text>
	<!-- 大于3条 -->
	<ul v-if="list2.length > 3" class="list2">
        <li v-for="(item, index) in list