本文主要介紹了Vue實現一種簡單的無限循環滾動動畫的示例，分享給大家，具體如下：

先看實現效果：

這種類似輪播的效果，通常可以使用輪播的方案解決，只不過相對于我要分享的方案來說，輪播實現還是要復雜些的。Vue提供了一種過渡動畫transition-group，這里我便是利用的這個效果

// template<transition-group name='list-complete' tag='div'> <div v-for='v in items' :key='v.ix' : > // 內容部分 </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;}

這樣，動畫效果就出來了，但是卻不能自動執行，所以我利用了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) }}

如比，效果得以實現，是不是更簡單點。順帶提一下，我這邊實現的效果是單條滾動，就像新聞滾動那樣，所以視圖窗口只能看到一條數據，你也可以不這樣限制，那么就能顯示整個列表了，不過每次還是只有單條數據的消失效果。

PS：動態渲染圖片可以使用這種方式

<img :src='http://m.4tl426be.cn/bcjs/require(`@/assets/imgs/icons/${somevar}.png`)'>

當然，如果有不同的意見，歡迎留言交流！

到此這篇關于Vue實現一種簡單的無限循環滾動動畫的示例的文章就介紹到這了,更多相關Vue 無限滾動動畫內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！