Angular ng-animate

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<div ng-controller="App">
    <button ng-click="add()">Add</button>
    <ul>
        <li ng-animate="{enter: 'repeat-enter',
                        leave: 'repeat-leave',
                        move: 'repeat-move'}" ng-click="remove($index)" ng-repeat="name in names">{{name}}</li>
    </ul>
</div>

CSS

.repeat-enter-setup, .repeat-leave-setup, .repeat-move-setup {
      -webkit-transition:all linear 1s;
      -moz-transition:all linear 1s;
      -ms-transition:all linear 1s;
      -o-transition:all linear 1s;
      transition:all linear 1s;
  }
  .repeat-enter-setup {
      max-height: 0;
      opacity:0;
  }
  .repeat-enter-setup.repeat-enter-start {
      max-height: 250px;
      opacity:1;
  }
  .repeat-leave-setup {
      opacity:1;
      max-height: 250px;
  }
  .repeat-leave-setup.repeat-leave-start {
      opacity:0;
      max-height: 0;
  }
  .repeat-move-setup {
  }
  .repeat-move-setup.repeat-move-start {
  }

JavaScript

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

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);
    };
}