Vue實現(xiàn)一種簡單的無限循環(huán)滾動動畫的示例
更新時間：2021年01月10日 09:38:18 作者：陳鋒
這篇文章主要介紹了Vue實現(xiàn)一種簡單的無限循環(huán)滾動動畫的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(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)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)面包屑的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
我們最開始拿到的element-ui是帶有下拉箭頭的,那么如何去除element-ui下拉框的下拉箭頭的實現(xiàn),本文就詳細(xì)的介紹一下,感興趣的可以了解一下2023-08-08
Vue獲取HTMLCollection列表的children時結(jié)果為undefined問題
這篇文章主要介紹了Vue獲取HTMLCollection列表的children時結(jié)果為undefined問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue中直接操作數(shù)組索引不奏效的問題解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
$once是一個函數(shù),可以為Vue組件實例綁定一個自定義事件,但該事件只能被觸發(fā)一次,觸發(fā)之后隨即被移除,下面這篇文章主要給大家介紹了關(guān)于Vue中$once的兩個實用小技巧,需要的朋友可以參考下2022-04-04
el-table實現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換)
這篇文章主要介紹了el-table實現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02
本篇文章給大家介紹了vue項目中API接口管理的相關(guān)知識點，以及相關(guān)JS代碼分析，有興趣的朋友參考下。2018-04-04
這篇文章主要介紹了如何通過vue實現(xiàn)微博中常見的@人的功能，同時增加鼠標(biāo)點擊事件和一些頁面小優(yōu)化。感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2021-12-12
這篇文章主要為大家詳細(xì)介紹了vue3.0實現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Electron+vite+vuetify項目搭建的流程和方法
最近想用Electron來進(jìn)行跨平臺的桌面應(yīng)用開發(fā),同時想用vuetify作為組件,于是想搭建一個這樣的開發(fā)環(huán)境,這里分享下Electron+vite+vuetify項目搭建的流程和方法,感興趣的朋友一起看看吧2024-06-06