本文主要介紹了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' : > // 內(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='http://www.lshqa.cn/bcjs/require(`@/assets/imgs/icons/${somevar}.png`)'>

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

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