AngularJS.de - Animations with ng-repeat (jQuery) 1.2

Example for AngularJS with ng-repeat and ng-animate with jQuery.

by angularjs_de

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.min.js"></script>
<button ng-click="replaceItem()">Go!</button>
<ul>
  <li ng-repeat="item in items" class="list-item">{{item}}</li>
</ul>

CSS

.list-item.ng-enter {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
  line-height: 0;
}
.list-item.ng-enter-active {
  line-height: 20px;
}

JavaScript

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

angular.module('myApp').controller('MainController', function($scope) {
  $scope.items = [1,2,3,4,5,6,7,8,9];

  $scope.replaceItem = function() {
    $scope.items.shift();
    $scope.items.push(Math.floor(Math.random()*1000000000));
  };
});