vue通過定時器實現垂直捲動公告

<div class="roll">
      <div class="roll-line" />
      <i class="el-icon-bell"></i>
      <ul class="list">
        <li
          v-for="(item, index) in ulList"
          :key="item.id"
          :class="!index && play ? 'toUp' : ''"
        >
          {{ item.msg }}
        </li>
      </ul>
</div>

export default {
  data() {
    return {
      ulList: [
        { msg: "這是第一條資訊這是第一條資訊這是第一條資訊這是第一條資訊" },
        { msg: "這是第二條資訊這是第二條資訊這是第二條資訊這是第二條資訊" },
        { msg: "這是第三條資訊這是第三條資訊這是第三條資訊這是第三條資訊" },
        { msg: "這是第四條資訊這是第四條資訊這是第四條資訊這是第四條資訊" },
        { msg: "這是第五條資訊這是第五條資訊這是第五條資訊這是第五條資訊" }
      ],
      play: false,
      timer: null, // //接收定時器
    };
  },
  mounted() {  //頁面掛載完成時就開始定時器，公告文字捲動
    setInterval(this.startPlay, 4000);
     console.log('開始定時器');
  },
  destroyed() { // 頁面銷燬時清除定時器
    clearInterval(this.timer); 
    console.log('銷燬定時器');
  },
  methods: {
    startPlay() {
      let that = this;
      that.play = true; //開始播放
      that.timer = setTimeout(() => {  //建立並執行定時器
        that.ulList.push(that.ulList[0]); //將第一條資料塞到最後一個
        that.ulList.shift(); //刪除第一條資料
        that.play = false; //暫停播放
      }, 500);
      console.log(that.timer);
    },
  }
};

<style lang="scss" scoped>
.roll {
  width: 100%;
  height: 60px; /*關鍵樣式*/
  line-height: 60px; /*關鍵樣式*/
  background: #fff;
  margin-bottom: 24px;
  box-shadow: 4px 0 10px rgba(226, 226, 226, 0.3);
  padding: 0 20px;
  color: #f5212d;
  font-size: 14px;
  display: flex;
  .roll-line {
    width: 2px;
    height: 100%;
    background: #dee2e6;
    margin: 0 20px 0 -20px;
  }
  .el-icon-bell {
    color: #343a40;
    line-height: 60px; /*關鍵樣式*/
    margin-right: 10px;
  }
  .toUp {
    margin-top: -60px; /*關鍵樣式*/
    transition: all 1s; /*關鍵樣式*/
  }
  .list {
    list-style: none;
    width: 100%;
    text-align: center;
    overflow: hidden; /*關鍵樣式*/
    height: 60px; /*關鍵樣式*/
    padding: 0;
    margin: 0;
  }
  li {
    text-align: left;
    height: 60px; /*關鍵樣式*/
    line-height: 60px; /*關鍵樣式*/
  }
}
</style>