Vue实现一种简单的无限循环滚动动画的示例

// template
<transition-group name="list-plete" tag="div">
 <div
  v-for="v in items"
  :key="v.ix"
  class="item list-plete-item pro-panel"
  :style="{ height: sh }"
 >
  // 内容部分 
 </div>
</transition-group>

//scss
.list-plete-item {
 transition: all 1s;
}
.list-plete-leave-to {
 opacity: 0;
 transform: translateY(-80px);
}
.list-plete-leave-active {
 position: absolute;
}

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)
 }
}

<img
 :src="require(`@/assets/imgs/icons/${somevar}.png`)"
>