利用Vue怎么編寫一個無限循環的滾動動畫

利用Vue怎么編寫一個無限循環的滾動動畫？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

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"
  :
 >
  // 內容部分 
 </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="require(`@/assets/imgs/icons/${somevar}.png`)"
>

關于利用Vue怎么編寫一個無限循環的滾動動畫問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。