vue文字间歇无缝向上逐个滚动

    <div class="marquee-wrap">
      <ul class="marquee-list" :class="{'animate-up': animateUp}">
        <li v-for="(item, index) in listData" :key="index">{{item.name}}</li>
      </ul>
    </div>

Ts

 animateUp = false
  
  listData = [
    {
      name:'120件/行政案件',
      type:0,
    },
    {
      name:'150件/民事案件',
      type:1,
    },
    {
      name:'110件/刑事案件',
      type:2,
    },
    {
      name:'100件/行政案件',
      type:2,
    },
    {
      name:'100件/行政案件',
      type:0,
    },
    {
      name:'100件/行政案件',
      type:1,
    },
    {
      name:'100件/行政案件',
      type:0,
    },
  ] 
  timer = null
  mounted() {
    this.timer = setInterval(this.scrollAnimate, 2000);
  }
  scrollAnimate() {
      this.animateUp = true
      setTimeout(() => {
        this.listData.push(this.listData[0])
        this.listData.shift()
        this.animateUp = false
      }, 500)
    }
  destroyed() {
     clearInterval(this.timer)
  } 

 scss     此 css 为三条滚动 修改条数 自行修改 .marquee-wrap 高度

.marquee-wrap  {
      height: 120px;
      margin: 0;
      overflow: hidden;
      .marquee-list {
        margin: 0; padding: 0;
        li {
          padding-left: 23px;
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          list-style: none;
          line-height: 40px;
          text-align: center;
          color: #fff;
          font-size: 14px;
          font-weight: 400;
        }
      }
      .animate-up {
        transition: all 0.5s ease-in-out;
        transform: translateY(-40px);
      }
    }