vue怎样用自带的transition实现这种滚动效果

Question

需要在vue里实现这种向上无缝滚动带停顿的效果 在一个容器里有多个li 每次滚动一个li的高度 缓慢的滚动一次然后停一下再滚动 我这样写的有问题 每次滚动之后弹了一下 像是被拉下来了 可能是由于我把animate赋值为false的原因 
我想用vue里封装的transition实现 但是没弄出来
就是需要它这种效果 右上角的位置
https://zt.weidai.com.cn/shar...

 <ul class="carInfo" :class="{anim:animate==true}">

         <li v-for="item in carDynamic">

              <div class="carNo">

                车辆牌号: {{item.licenseNo}}

              </div>

              <div class="carInfo-detail">

                <p class="p1">

                  <span>{{item.address}}</span>

                  <span>车辆速度:<em>{{item.speed}}</em></span>

                </p>

                <p class="p2">

                  <span>地址</span>

                  <span>时间:<em>{{item.time}}</em></span>

                </p>

              </div>

            </li>

      </ul>

    </div>

    

mounted() {

this.init();

setInterval(this.scroll,1000);

},

methods: {

init() {

  map = new AMap.Map('container', {

     center: [116.397428, 39.90923],

     resizeEnable: true,

     zoom: 10

   })

},

scroll(){

   this.animate=true;

   setTimeout(()=>{

           this.carDynamic.push(this.carDynamic[0]);

           this.carDynamic.shift();

           this.animate=false;

   },500)

}

.anim{

transition: all 2s;

margin-top: -200px;

}

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

不要用transition，会使代码变得复杂，直接用css3的transition最简单。只要计算好高度，和需要向上滚动的距离，很容易