Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫的示例
本文主要介紹了Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫的示例，分享給大家，具體如下：
先看實(shí)現(xiàn)效果：
這種類似輪播的效果，通?？梢允褂幂啿サ姆桨附鉀Q，只不過(guò)相對(duì)于我要分享的方案來(lái)說(shuō)，輪播實(shí)現(xiàn)還是要復(fù)雜些的。
Vue提供了一種過(guò)渡動(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)畫效果就出來(lái)了，但是卻不能自動(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)，是不是更簡(jiǎn)單點(diǎn)。順帶提一下，我這邊實(shí)現(xiàn)的效果是單條滾動(dòng)，就像新聞滾動(dòng)那樣，所以視圖窗口只能看到一條數(shù)據(jù)，你也可以不這樣限制，那么就能顯示整個(gè)列表了，不過(guò)每次還是只有單條數(shù)據(jù)的消失效果。
PS：動(dòng)態(tài)渲染圖片可以使用這種方式
<img
:src="require(`@/assets/imgs/icons/${somevar}.png`)"
>
當(dāng)然，如果有不同的意見，歡迎留言交流！
到此這篇關(guān)于Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫的示例的文章就介紹到這了,更多相關(guān)Vue 無(wú)限滾動(dòng)動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)面包屑的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
去除element-ui下拉框的下拉箭頭的實(shí)現(xiàn)
我們最開始拿到的element-ui是帶有下拉箭頭的,那么如何去除element-ui下拉框的下拉箭頭的實(shí)現(xiàn),本文就詳細(xì)的介紹一下,感興趣的可以了解一下2023-08-08
Vue獲取HTMLCollection列表的children時(shí)結(jié)果為undefined問(wèn)題
這篇文章主要介紹了Vue獲取HTMLCollection列表的children時(shí)結(jié)果為undefined問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue中直接操作數(shù)組索引不奏效的問(wèn)題解讀
這篇文章主要介紹了Vue中直接操作數(shù)組索引不奏效的問(wèn)題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
$once是一個(gè)函數(shù),可以為Vue組件實(shí)例綁定一個(gè)自定義事件,但該事件只能被觸發(fā)一次,觸發(fā)之后隨即被移除,下面這篇文章主要給大家介紹了關(guān)于Vue中$once的兩個(gè)實(shí)用小技巧,需要的朋友可以參考下2022-04-04
el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換)
這篇文章主要介紹了el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-02-02
本篇文章給大家介紹了vue項(xiàng)目中API接口管理的相關(guān)知識(shí)點(diǎn)，以及相關(guān)JS代碼分析，有興趣的朋友參考下。2018-04-04
如何通過(guò)Vue實(shí)現(xiàn)@人的功能
這篇文章主要介紹了如何通過(guò)vue實(shí)現(xiàn)微博中常見的@人的功能，同時(shí)增加鼠標(biāo)點(diǎn)擊事件和一些頁(yè)面小優(yōu)化。感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2021-12-12
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Electron+vite+vuetify項(xiàng)目搭建的流程和方法
最近想用Electron來(lái)進(jìn)行跨平臺(tái)的桌面應(yīng)用開發(fā),同時(shí)想用vuetify作為組件,于是想搭建一個(gè)這樣的開發(fā)環(huán)境,這里分享下Electron+vite+vuetify項(xiàng)目搭建的流程和方法,感興趣的朋友一起看看吧2024-06-06