vue h5 实现数据自下往上无缝滚动 过渡

<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>

.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);
        }
}

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)
　　}
}