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最简单。

只要计算好高度，和需要向上滚动的距离，很容易