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到数组后面最后开启动画。这样就完美的解决了问题。