Angular: Empty Fiddle

http://angularjs.org/

by irhabi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
<div ng-controller="MyCtrl as vm">
   <ul>
       <li ng-repeat="obj in vm.arr track by $index" 
           ng-style="{'color':vm.colors[obj.person]}"
           ng-bind="obj.story">
       </li>
   </ul>
</div>

CSS

li{
  background-color:black;
}
li.ng-enter {
    -webkit-transition: 3s;
    transition: 3s;
    opacity: 0;
}
li.ng-enter-active {
    opacity: 1;
}

JavaScript

var myApp = angular.module('myApp',['ngAnimate']);

myApp.controller('MyCtrl', MyCtrl);

function MyCtrl($timeout) {
    var vm = this;
    vm.colors = {Sam:'white',Jane:'red',Tom:'pink'};
		vm.arr = [
      {person:'Sam',story:'some story'},
      {person:'Tom',story:'some story2'}      
    ];
    
    $timeout(function(){
    	vm.arr.push({person:'Jane',story:'some story3'});
    },2000);
    
    $timeout(function(){
    	vm.arr.pop();
    },4000);
}