利用Vue怎么編寫(xiě)一個(gè)無(wú)限循環(huán)的滾動(dòng)動(dòng)畫(huà)

利用Vue怎么編寫(xiě)一個(gè)無(wú)限循環(huán)的滾動(dòng)動(dòng)畫(huà)？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

Vue提供了一種過(guò)渡動(dòng)畫(huà)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"
  :
 >
  // 內(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)畫(huà)效果就出來(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`)"
>

關(guān)于利用Vue怎么編寫(xiě)一個(gè)無(wú)限循環(huán)的滾動(dòng)動(dòng)畫(huà)問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。