JSFiddle - React, Tailwind, and code Playground

Animated ng-repeat with Delete in Track By. which is a big deal.

by Andrew Pougher

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<h1>
Click to Delete Any Row
</h1><div ng-app="app" ng-controller="poogyController" class="well">
    <div>You have {{messages.length}} messages</div>
    <ul ng-repeat="m in messages track by m.id"  ng-class="{'rotateOutDownLeft':killer }" class="animated">
        <li ng-click="killme(this,$index)" class="label progress-bar-warning text-center center-block"><span class="pull-left small">{{m.id}}</span> {{m.msg}} </li>
    </ul>
</div>

CSS

@import url("https://daneden.github.io/animate.css/animate.min.css")

JavaScript

var app = angular.module('app', []);
var messages = ["Andrew", "Wants", "NewJobAsVet"];
app.controller('poogyController', function ($scope, $timeout) {
    $scope.messages = [{
    "id": 1,
        "msg": "Hello"
    }];

    function insert() {
        var random = Math.round(Math.random() * (messages.length - 1));
        var message = messages.splice(random, 1)[0];
        $scope.messages.push({
         id: random+Math.floor((Math.random() * 100) + 1),
            msg: message
        });

        if (messages.length) {
            $timeout(insert, 400);
        }
    }
    $timeout(insert, 400);
$scope.killme = function(a, $index){

a.killer = true;
 $timeout(function() {
 $scope.messages.splice($index, 1);
 },600);
}
   
});