Vue實現(xiàn)一種簡單的無限循環(huán)滾動動畫的示例
更新時間：2021年01月10日 09:38:18 作者：陳鋒
這篇文章主要介紹了Vue實現(xiàn)一種簡單的無限循環(huán)滾動動畫的示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
本文主要介紹了Vue實現(xiàn)一種簡單的無限循環(huán)滾動動畫的示例，分享給大家，具體如下：
先看實現(xiàn)效果：
這種類似輪播的效果，通常可以使用輪播的方案解決，只不過相對于我要分享的方案來說，輪播實現(xiàn)還是要復(fù)雜些的。
Vue提供了一種過渡動畫transition-group，這里我便是利用的這個效果
// 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;
}
這樣，動畫效果就出來了，但是卻不能自動執(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)
}
}
如比，效果得以實現(xiàn)，是不是更簡單點。順帶提一下，我這邊實現(xiàn)的效果是單條滾動，就像新聞滾動那樣，所以視圖窗口只能看到一條數(shù)據(jù)，你也可以不這樣限制，那么就能顯示整個列表了，不過每次還是只有單條數(shù)據(jù)的消失效果。
PS：動態(tài)渲染圖片可以使用這種方式
<img
:src="require(`@/assets/imgs/icons/${somevar}.png`)"
>
當(dāng)然，如果有不同的意見，歡迎留言交流！
到此這篇關(guān)于Vue實現(xiàn)一種簡單的無限循環(huán)滾動動畫的示例的文章就介紹到這了,更多相關(guān)Vue 無限滾動動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue SPA 首屏優(yōu)化方案的的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
這篇文章主要為大家詳細介紹了Vue模擬實現(xiàn)購物車結(jié)算功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue mint-ui 實現(xiàn)省市區(qū)街道4級聯(lián)動示例(仿淘寶京東收貨地址4級聯(lián)動)
本篇文章主要介紹了vue mint-ui 實現(xiàn)省市區(qū)街道4級聯(lián)動（仿淘寶京東收貨地址4級聯(lián)動），非常具有實用價值，需要的朋友可以參考下2017-10-10
最近寫vue的一個練手項目需要在里面實現(xiàn)一個輪播圖,想到去用第三方插件,百度了一輪,發(fā)現(xiàn)大部分都是swiper這個插件,這篇文章主要給大家介紹了關(guān)于vue2使用swiper4踩坑的相關(guān)資料,需要的朋友可以參考下2022-01-01
Vue全局事件總線$bus安裝與應(yīng)用小結(jié)
這篇文章主要介紹了Vue全局事件總線$bus安裝與應(yīng)用,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue 固定頭 固定列 點擊表頭可排序的表格組件的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了如何在 Vue 中使用 JSX，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-02-02
這篇文章主要討論Vue?data中隨意改一個屬性,視圖都會更新嗎?下面來自面試官的問題然后做i出的一個問題總結(jié)，具有一定的參考價值，需要的小伙伴可以參考一下2021-12-12
vue2之響應(yīng)式雙向綁定,在對象或數(shù)組新增屬性頁面無響應(yīng)的情況
這篇文章主要介紹了vue2之響應(yīng)式雙向綁定,在對象或數(shù)組新增屬性頁面無響應(yīng)的情況及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
最近做項目遇到這樣的一個需求，通過select元素來選擇音頻文件的名稱，點擊按鈕可以進行試聽。接下來通過本文給大家介紹vue項目中通過點擊事件讀取音頻文件的方法,需要的朋友可以參考下2018-05-05