vue h5 實現數據自下往上無縫滾動 過渡

需求：開發h5活動頁 需要呈現效果是 自下往上循環滾動n條數據

頁面布局：

<div class="scrollBar">
　　<div :class="['winDetails', {'animate-up': animateUp}]" >
    　　<p v-for="item in lotteryAllList" :key="item.id">
        　　恭喜{{renderLockerPhone(item.userName)}}獲得{{item.giveAmount/100}}元
   　　</p>
　　</div>
</div>

scss:

.scrollBar {
        width: 31rem;
        height: 3.2rem;
        display: flex;
        align-items: center;
        background-color: rgb(255,34,0);
        border-radius: 15px;
        margin: 2.1rem 0 1.2rem 0;
        position: relative;
        overflow: hidden;
        .winDetails {
            color: #FFD200;
            font-size: 1.6rem;
            letter-spacing:2px;
            font-weight: 300;
            position: absolute;
            left: 4.7rem;
            top: 0;
            > p {
                height: 3.2rem;
                line-height: 3.2rem;
            }
        }
        .animate-up {
            transition: all 1s ease-in-out;
            transform: translateY(-3.2rem);
        }
}

js:

data() {
     animateUp: false //  動畫
    lotteryAllList: [] // 接口返回數據 測試你可以寫固定數據
}

mounted() {this.interval = setInterval(this.scrollAnimate, 2000); // 啟動動畫定時},
destroyed() { clearInterval(this.interval)},
methods: {
　　scrollAnimate() { // 動畫滾動
   　　this.animateUp = true;
      setTimeout(() => {
         this.lotteryAllList.push(this.lotteryAllList[0]);
         this.lotteryAllList.shift();
         this.animateUp = false
　　　　}, 1000)
　　}
}

整理：

　　功能實現的代碼還是比較簡單的 但是思想很重要 原先思路是使用 過渡的top 循環往上移動 在數據沒有后停止動畫 然后將top重置，但是會出現頁面數據斷層每次數據位置重置后總會出現斷層無法做到無縫，后來在看了一些別人開發的代碼后有了思路。每執行完一條數據后就停止動畫然后將該數據push到數組后面最后開啟動畫。這樣就完美的解決了問題。