Angular ng-animate

HTML

<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script>
<div ngApp="MyApp">
    <div ng-controller="App">
        <button ng-click="add()">Add</button>
        <ul>
            <li class="move-animation" ng-click="remove($index)" ng-repeat="name in names">{{name}}</li>
        </ul>
    </div>
</div>

CSS

.move-animation.ng-move {
    -webkit-transition:all linear 1s;
    -moz-transition:all linear 1s;
    -ms-transition:all linear 1s;
    -o-transition:all linear 1s;
    transition:all linear 1s;
     max-height: 0;
    opacity:0;
}
  .move-animation.ng-move.ng-move-active {
    max-height: 250px;
    opacity:1;
}

JavaScript

angular.module('MyApp', ['ngAnimate']);

function App($scope) {
    $scope.names = [];
    var data = [];
    for (var i = 0; i < 100; i++) {
        data.push('item' + i)
    }
    $scope.add = function () {
        if (data.length) $scope.names.splice(0, 0, data.pop());
    };
    $scope.remove = function (index) {
        $scope.names.splice(index, 1);
    };
}