JSFiddle - React, Tailwind, and code Playground

by justforlxz

HTML

<div id="app">
<button v-on:click="add">add</button>
<button v-on:click="remove">remove</button>
<transition-group name="group" tag="ul">
<li v-for="item in items" v-bind:key="item">
  {{ item }}
</li>
</transition-group>
</div>

CSS

.group-enter,
.group-leave-to {
  opacity: 0;
  transform: translateY(10px)
}

.group-enter-active,
.group-leave-active {
  transition: all 1s;
}

JavaScript

new Vue({
	el: "#app",
	data: {
			items: [1,2,3]
	  },
	  methods: {
	  	add() {
	  		this.items.push(0)
	  	}
	  }
})