Chapter 3: Staggering batched animations

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.2/angular-animate.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <input ng-model="search" />
        <div ng-repeat="name in names | filter:search"
             class="container">
            {{ name }}
        </div>
    </div>
</div>

CSS

.container {
    line-height: 30px;
}
.container.ng-enter,
.container.ng-leave,
.container.ng-move {
    transition:all linear 30s;
    
}
.container.ng-enter,
.container.ng-leave.ng-leave-active,
.container.ng-move {
    opacity:0;
    max-height:0;
}
.container.ng-enter.ng-enter-active,
.container.ng-leave,
.container.ng-move.ng-move-active {
    opacity:1;
    max-height:30px;
}
.container.ng-enter-stagger,
.container.ng-leave-stagger,
.container.ng-move-stagger {
    transition-delay:0.2s;
    transition-duration:0;
}

JavaScript

angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
    $scope.names = [
        'Jake',
        'Henry',
        'Roger',
        'Joe',
        'Robert',
        'John'
    ];
});