Angular animating ng-repeat with staggering

by Kyrylo Slatin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular-animate.js"></script>
<div ng-controller="ctrlr">
    <div ng-repeat="item in items | orderBy: [pred, second]" class="slide">
        <b>{{item.name}}</b>:  <i>{{item.address}}</i>
    </div>
    <button ng-click="add()">Add</button>
    <button ng-click="reset()">Reset</button>
</div>

CSS

.slide.ng-enter {
  transition:0.3s linear all;
  opacity:0;
  transform:translate(0,-20px);
}
.slide.ng-enter-stagger {
  transition-delay: 0.2s;
}
.slide.ng-enter.ng-enter-active {
  opacity:1;
  transform:translate(0,0);
}

JavaScript

angular.module('app', []);
angular.module('app').controller('ctrlr', function ($scope) {
    $scope.items = [];
    $scope.reset = function(){
        $scope.items = [
            {name: 'Tom', address: 'street'},
            {name: 'John', address: 'area'},
            {name: 'Becky', address: 'prosp'},
            {name: 'Phillip', address: 'ave'},
            {name: 'Hanz', address: 'blvd'},
            {name: 'Hanz', address: 'prosp'},
        ];
    };
    $scope.pred = 'name';
    $scope.second = '-address';
    $scope.add = function(){
        $scope.items.push({name: 'Hanz', address: 'blvd'});
        $scope.items.push({name: 'Hanz', address: 'blvd'});
    }
    $scope.reset();
});
angular.bootstrap(document, ['app', 'ngAnimate']);