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

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

這種類似輪播的效果，通常可以使用輪播的方案解決，只不過相對(duì)于我要分享的方案來說，輪播實(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' : > // 內(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)，是不是更簡(jiǎn)單點(diǎn)。順帶提一下，我這邊實(shí)現(xiàn)的效果是單條滾動(dòng)，就像新聞滾動(dòng)那樣，所以視圖窗口只能看到一條數(shù)據(jù)，你也可以不這樣限制，那么就能顯示整個(gè)列表了，不過每次還是只有單條數(shù)據(jù)的消失效果。

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

<img :src='http://www.piao2010.com/bcjs/require(`@/assets/imgs/icons/${somevar}.png`)'>

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

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