第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

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

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

慕田峪7331174 2019-03-14 10:15:29
需要在vue里實(shí)現(xiàn)這種向上無(wú)縫滾動(dòng)帶停頓的效果 在一個(gè)容器里有多個(gè)li 每次滾動(dòng)一個(gè)li的高度 緩慢的滾動(dòng)一次然后停一下再滾動(dòng) 我這樣寫(xiě)的有問(wèn)題 每次滾動(dòng)之后彈了一下 像是被拉下來(lái)了 可能是由于我把a(bǔ)nimate賦值為false的原因 我想用vue里封裝的transition實(shí)現(xiàn) 但是沒(méi)弄出來(lái)就是需要它這種效果 右上角的位置https://zt.weidai.com.cn/shar... <ul class="carInfo" :class="{anim:animate==true}">         <li v-for="item in carDynamic">              <div class="carNo">                車(chē)輛牌號(hào): {{item.licenseNo}}              </div>              <div class="carInfo-detail">                <p class="p1">                  <span>{{item.address}}</span>                  <span>車(chē)輛速度:<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ò)哪些方法相關(guān)代碼// 請(qǐng)把代碼文本粘貼到下方(請(qǐng)勿用圖片代替代碼)你期待的結(jié)果是什么?實(shí)際看到的錯(cuò)誤信息又是什么?
查看完整描述

2 回答

?
萬(wàn)千封印

TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊

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

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


查看完整回答
反對(duì) 回復(fù) 2019-04-14
  • 2 回答
  • 0 關(guān)注
  • 1351 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)