First look at the implementation effect:

This kind of round-robin effect can usually be solved using a round-robin solution, but the round-robin implementation is a bit more complicated than the one I’m going to share.

Vue provides a transition animation transition-group, which I used 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 section</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;
}
Copy the code

So, the animation comes out, but it doesn’t work 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) {
      constitem = { ... this.removeitem[0] }
      item.ix = this.nextNum++
      this.items.push(item)
    }
  },
  remove: function() {
    this.removeitem = this.items.splice(0.1)}}Copy the code

For example, the effect can be achieved, is not easier. By the way, I’m doing a single scroll, like the news scroll, so the view window can only see one piece of data, and you can do that without limiting it to show the entire list, but only one piece of data will disappear at a time. PS: Dynamic rendering of images can be used in this way

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

Of course, if there are different opinions, welcome message exchange!