Vue實(shí)現(xiàn)一種簡單的無限循環(huán)滾動(dòng)動(dòng)畫的示例

更新時(shí)間：2021年01月10日 09:38:18 作者：陳鋒

這篇文章主要介紹了Vue實(shí)現(xiàn)一種簡單的無限循環(huán)滾動(dòng)動(dòng)畫的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

本文主要介紹了Vue實(shí)現(xiàn)一種簡單的無限循環(huán)滾動(dòng)動(dòng)畫的示例，分享給大家，具體如下：

先看實(shí)現(xiàn)效果：

這種類似輪播的效果，通?？梢允褂幂啿サ姆桨附鉀Q，只不過相對于我要分享的方案來說，輪播實(shí)現(xiàn)還是要復(fù)雜些的。
Vue提供了一種過渡動(dòng)畫transition-group，這里我便是利用的這個(gè)效果

// template
<transition-group name="list-complete" tag="div">
 <div
  v-for="v in items"
  :key="v.ix"
  class="item list-complete-item pro-panel"
  :style="{ height: sh }"
 >
  // 內(nèi)容部分 
 </div>
</transition-group>

//scss
.list-complete-item {
 transition: all 1s;
}
.list-complete-leave-to {
 opacity: 0;
 transform: translateY(-80px);
}
.list-complete-leave-active {
 position: absolute;
}

這樣，動(dòng)畫效果就出來了，但是卻不能自動(dòng)執(zhí)行，所以我利用了setInterval：

mounted() {
 let count = 4000
 if (!this.timer) {
  this.timer = setInterval(() => {
   if (this.items.length > 1) {
    this.remove()
    this.$nextTick().then(() => {
     this.add()
    })
   }
  }, count)
 }
},
methods: {
 add: function() {
  if (this.items && this.items.length) {
   const item = { ...this.removeitem[0] }
   item.ix = this.nextNum++
   this.items.push(item)
  }
 },
 remove: function() {
  this.removeitem = this.items.splice(0, 1)
 }
}

如比，效果得以實(shí)現(xiàn)，是不是更簡單點(diǎn)。順帶提一下，我這邊實(shí)現(xiàn)的效果是單條滾動(dòng)，就像新聞滾動(dòng)那樣，所以視圖窗口只能看到一條數(shù)據(jù)，你也可以不這樣限制，那么就能顯示整個(gè)列表了，不過每次還是只有單條數(shù)據(jù)的消失效果。

PS：動(dòng)態(tài)渲染圖片可以使用這種方式

<img
 :src="require(`@/assets/imgs/icons/${somevar}.png`)"
>

當(dāng)然，如果有不同的意見，歡迎留言交流！

到此這篇關(guān)于Vue實(shí)現(xiàn)一種簡單的無限循環(huán)滾動(dòng)動(dòng)畫的示例的文章就介紹到這了,更多相關(guān)Vue 無限滾動(dòng)動(dòng)畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue SPA 首屏優(yōu)化方案
這篇文章主要介紹了Vue SPA 首屏優(yōu)化方案的的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
2021-02-02
Vue模擬實(shí)現(xiàn)購物車結(jié)算功能
這篇文章主要為大家詳細(xì)介紹了Vue模擬實(shí)現(xiàn)購物車結(jié)算功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue mint-ui 實(shí)現(xiàn)省市區(qū)街道4級(jí)聯(lián)動(dòng)示例(仿淘寶京東收貨地址4級(jí)聯(lián)動(dòng))
本篇文章主要介紹了vue mint-ui 實(shí)現(xiàn)省市區(qū)街道4級(jí)聯(lián)動(dòng)（仿淘寶京東收貨地址4級(jí)聯(lián)動(dòng)），非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-10-10
關(guān)于vue2使用swiper4的踩坑記錄
最近寫vue的一個(gè)練手項(xiàng)目需要在里面實(shí)現(xiàn)一個(gè)輪播圖,想到去用第三方插件,百度了一輪,發(fā)現(xiàn)大部分都是swiper這個(gè)插件,這篇文章主要給大家介紹了關(guān)于vue2使用swiper4踩坑的相關(guān)資料,需要的朋友可以參考下
2022-01-01
Vue全局事件總線$bus安裝與應(yīng)用小結(jié)
這篇文章主要介紹了Vue全局事件總線$bus安裝與應(yīng)用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-09-09
Vue 固定頭固定列點(diǎn)擊表頭可排序的表格組件
這篇文章主要介紹了Vue 固定頭固定列點(diǎn)擊表頭可排序的表格組件的相關(guān)資料,需要的朋友可以參考下
2016-11-11
如何在 Vue 中使用 JSX
這篇文章主要介紹了如何在 Vue 中使用 JSX，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2021-02-02
Vue?data中隨意改一個(gè)屬性,視圖都會(huì)更新嗎?
這篇文章主要討論Vue?data中隨意改一個(gè)屬性,視圖都會(huì)更新嗎?下面來自面試官的問題然后做i出的一個(gè)問題總結(jié)，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2021-12-12
vue2之響應(yīng)式雙向綁定,在對象或數(shù)組新增屬性頁面無響應(yīng)的情況
這篇文章主要介紹了vue2之響應(yīng)式雙向綁定,在對象或數(shù)組新增屬性頁面無響應(yīng)的情況及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue通過點(diǎn)擊事件讀取音頻文件的方法
最近做項(xiàng)目遇到這樣的一個(gè)需求，通過select元素來選擇音頻文件的名稱，點(diǎn)擊按鈕可以進(jìn)行試聽。接下來通過本文給大家介紹vue項(xiàng)目中通過點(diǎn)擊事件讀取音頻文件的方法,需要的朋友可以參考下
2018-05-05