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

成都創(chuàng)新互聯(lián)公司服務項目包括印江網(wǎng)站建設、印江網(wǎng)站制作、印江網(wǎng)頁制作以及印江網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，印江網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到印江省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

Vue提供了一種過渡動畫transition-group，這里我便是利用的這個效果

// template

 

  // 內(nèi)容部分 
 


//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)渲染圖片可以使用這種方式

關(guān)于利用Vue怎么編寫一個無限循環(huán)的滾動動畫問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

網(wǎng)站名稱：利用Vue怎么編寫一個無限循環(huán)的滾動動畫-創(chuàng)新互聯(lián)
標題網(wǎng)址：http://weahome.cn/article/cesejj.html