An example of implementing a simple infinite loop scrolling animation in Vue

This article mainly introduces an example of Vue implementing a simple infinite loop scrolling animation, which is shared with everyone. The details are as follows:

First look at the implementation effect:

This kind of carousel-like effect can usually be solved using a carousel solution, but compared to the solution I am going to share, the carousel implementation is still more complicated.
Vue provides a transition animation transition-group, which is the effect I use here.

// template
<transition-group name="list-complete" tag="div">
 <div
  v-for="v in items"
  :key="v.ix"
  class="item list-complete-item pro-panel"
  :style="{ height: sh }"
 >
  //Content part</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;
}

In this way, the animation effect comes out, but it cannot be executed automatically, so I use 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)
 }
}

For example, it would be simpler to achieve the effect. By the way, the effect I achieved here is single-line scrolling, just like news scrolling, so the view window can only see one piece of data. You can also not limit it in this way, then the entire list can be displayed, but each time only a single piece of data will disappear.

PS: This method can be used for dynamic rendering of images

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

Of course, if you have different opinions, please leave a message to communicate!

This concludes this article about an example of implementing a simple infinite loop scrolling animation with Vue. For more related Vue infinite scrolling animation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!