无缝滚动效果

<!-- 无缝滚动效果 -->
<div class="marquee-wrap">
          <ul class="marquee-list" :class="{'animate-up': animateUp}">
            <li v-for="(item, index) in arr" :key="index">
              <span>{{ item.name }}</span>
              <span>{{ item.age }}</span>
              <div v-if="arr === undefined" class="data-empty">暂无数据</div>
            </li>
          </ul>
</div>

js

data() {
    return {
      animateUp: false,
      timer: null,
      arr: [
        {
          name: "aaa",
          age: 21
        },
        {
          name:"bbb",
          age: 23
        }
      ]
    }
},
mounted() {
    this.timer = setInterval(this.scrollAnimate, 2000);
},
methods: {
  scrollAnimate() {
      this.animateUp = true;
      if (this.arr && this.arr != undefined) {
        setTimeout(() => {
          this.arr.push(this.arr[0]);
          this.arr.shift();
          this.animateUp = false;
        }, 1000);
      }
    }
},
beforeDestroy() {
    clearInterval(this.timer);
}
<style scoped>
.data-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0);
  color: #888;
  font-size: 14px;
  height: 280px;
  box-sizing: border-box;
}
.marquee-wrap {
  width: 100%;
  height: 40px;
  margin: 0 auto;
  overflow: hidden;
}
// ul的margin ,padding要设置为0
.marquee-list {
  margin: 0;
  padding: 0;
}
.marquee-list li {
  width: 100%;
  height: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 20px;
  list-style: none;
  line-height: 40px;
  text-align: left;
  color: #fff;
  font-size: 16px;
}
.marquee-wrap .animate-up {
  transition: all 0.5s ease-in-out;
  transform: translateY(-40px);
}
</style>