vue 消息無縫滾動

<div class="fix-vote">
  <div class="vote-list-box" :class="{ anim: animate }">
    <div class="vote-item" v-for="(item, index) in voteList" :key="index">
      <span>{{ item.nickname }}</span>
      <span>爲</span>
      <span>{{ item.appname }}</span>
      <span>投上寶貴的一票</span></div>
  </div>
</div>

export default {
  name: "home",
  data() {
    return {
      animate: false,
      activeIndex: 0,
      voteList: [
        { nickname: "nickname1", appname: "appname1" }, 
        { nickname: "nickname2", appname: "appname2" },
        { nickname: "nickname3", appname: "appname3" },
        { nickname: "nickname4", appname: "appname4" }
      ]
    }
  },
  methods: {
    scroll() {
      setInterval(() => {
        this.animate = true;  // 向上滾動的時候需要添加css3過渡動畫
        setTimeout(() => {
          this.voteList.push(this.voteList[0]); // 將第一條放到最後
          this.voteList.shift();
          this.animate = false; // 動畫結束後清除（setTimeout的間隔時間要和過渡動畫的duration時間一樣）
        }, 500);
      }, 2000);
    }
  },
  mounted() {
    this.scroll();
  }
};

.fix-vote
      position:fixed
      left:0
      font-size:12PX
      top:100px
      width:100%
      height:28PX
      text-align:center
      overflow:hidden
      background:linear-gradient(89deg,rgba(254,161,110,.5),rgba(106,52,189,.5))
      .vote-list-box
        // transition:top .5s
        // line-height:28PX
        .vote-item
          height:28PX
          line-height:28PX
        &.anim
          transition:all .5s
          margin-top:-28PX