vue怎樣用自帶的transition實(shí)現(xiàn)這種滾動(dòng)效果

需要在vue里實(shí)現(xiàn)這種向上無(wú)縫滾動(dòng)帶停頓的效果在一個(gè)容器里有多個(gè)li 每次滾動(dòng)一個(gè)li的高度緩慢的滾動(dòng)一次然后停一下再滾動(dòng) 我這樣寫的有問(wèn)題每次滾動(dòng)之后彈了一下像是被拉下來(lái)了可能是由于我把a(bǔ)nimate賦值為false的原因
我想用vue里封裝的transition實(shí)現(xiàn) 但是沒弄出來(lái)
就是需要它這種效果右上角的位置
https://zt.weidai.com.cn/shar...

請(qǐng)輸入代碼

      <ul class="carInfo" :class="{anim:animate==true}">
         <li v-for="item in carDynamic">
              <div class="carNo">
                車輛牌號(hào): {{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>時(shí)間:<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;

}

問(wèn)題描述

問(wèn)題出現(xiàn)的環(huán)境背景及自己嘗試過(guò)哪些方法

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

回答

編輯回答

獨(dú)白

不要用transition，會(huì)使代碼變得復(fù)雜，直接用css3的transition最簡(jiǎn)單。

只要計(jì)算好高度，和需要向上滾動(dòng)的距離，很容易

2018年5月29日 03:24

編輯回答

乞許

參考網(wǎng)址：跑馬燈效果

稍微更改一下代碼即可實(shí)現(xiàn)你想要的效果：

<!DOCTYPE html>
<html>
<head>
  <title>垂直跑馬燈效果</title>
  <style type="text/css">
    ul,li{
      list-style:none;
      display:block;
      margin: 0;
      padding: 0;
    }
    #loop-show-box {
      width: 300px;
      height: 75px;
      background: red;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      overflow: hidden;
    }
    .li-style {
      width: 100%;
      height: 25px;
      text-align: center;
    }
  </style>
</head>
<body>
<div id="loop-show-box">
  <ul id="con1">
    <li class="li-style">測(cè)試1號(hào)</li>
    <li class="li-style">測(cè)試2號(hào)</li>
    <li class="li-style">測(cè)試3號(hào)</li>
    <li class="li-style">測(cè)試4號(hào)</li>
  </ul>
  <ul id="con2"></ul>
</div>
<script type="text/javascript">
  var area = document.getElementById('loop-show-box');
  var con1 = document.getElementById('con1');
  var con2 = document.getElementById('con2');
  var mytimer1 = null;
  var mytimer = null;
  var time = 1000 / 60;
  con2.innerHTML = con1.innerHTML;
  function scrollUp () {
    if (area.scrollTop >= con1.offsetHeight) {
      area.scrollTop = 0;
    } else {
      if (area.scrollTop % 25 == 0) {
        clearInterval(mytimer);
        clearInterval(mytimer1);
        mytimer1 = setTimeout(function () {
          mytimer = setInterval(scrollUp, time);
        }, 1000);
      }
      area.scrollTop++;
    }
  }
  mytimer = setInterval(scrollUp, time);
</script>
</body>
</html>

2017年7月29日 22:17