JSFiddle - React, Tailwind, and code Playground

by NesterOne

HTML

<div id="app">
  <button @click="toggleTotal">toggle</button>
  <span v-if="showTotal">{{ queue.length }}</span>
  <transition-group name="list-item" @after-enter="afterEnter" tag="ul">
    <li v-for="item in list" :key="item.id">{{ item.text }}</li>
  </transition-group>
</div>

CSS

.list-item-enter-active, .list-item-move {
  transition: transform 1s;
}

.list-item-enter {
  transform: translateY(-100%);
}

ul {
  overflow: hidden;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	list: [],
    queue: [],
    handling: false,
    showTotal: false
  },
  created () {
  	let id = 0
  	setInterval(() => {
    	this.queue.push({
      	id: ++id,
        text: Date.now()
      })
      this.tryHandleQueue()
    }, 100)
  },
  methods: {
  	tryHandleQueue () {
    	if (!this.handling && this.queue.length) {
      	const item = this.queue.shift()
      	this.list.unshift(item)
        this.handling = true
      }
    },
    afterEnter (el) {
    	this.handling = false
      this.tryHandleQueue()
    },
    toggleTotal () {
    	this.showTotal = !this.showTotal
    }
  }
})