JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="vue">
  <button @click="items.push(Math.random())">
  Add item
  </button>
    <table is="transition-group" class="list" :class="{ready}">
      <tr v-for="item in items" :key="item">
        <td>{{item}}</td>
      </tr>
    </table>
</div>

CSS

.list tr{
  transition:background 0.5s;
}

.list.ready .v-enter{
  background:yellow;
}

Vue

new Vue({
	el:'#vue',
  data(){
  	return {
    	ready:false,
    	items:Array(5).fill(0).map(Math.random)
    }
  },
  mounted(){
  	this.$nextTick(()=>this.ready = true)
  }
})