JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="//angularlight.org/bin/alight_0.12.last.min.js"></script>
<div al-app="main">
  <button @click="insert()">insert</button>
  
  <div al-repeat="i in list" al-init="created(i, $element)" class="box step0">{{i.when}}</div>

</div>

CSS

.box {
  transition: background-color 0.5s ease;
  //background-color: red;
}
.step0 {
  background-color: green;
}
.step1 {
  background-color: red;
}
.step2 {
  background-color: blue;
}

JavaScript

function main(scope) {
	scope.list = [{}, {}, {}];
	scope.insert = function() {
  	var i = Math.floor(Math.random()*scope.list.length);
  	scope.list.splice(i, 0, {});
  };
  
  scope.created = function(i, el) {
  	i.when = Date.now();
  	setTimeout(function() {
    	el.classList.remove('step0');
    	el.classList.add('step1');
      setTimeout(function() {
      	el.classList.remove('step1');
      	el.classList.add('step2');
        setTimeout(function() {
        	el.classList.remove('step2');
        }, 500);
      }, 1000);
    }, 100);
  };
};