AngularJS incorporates native support for staggering animations that happen as a batch. This will almost exclusively occur in the context of ng-repeat
.
Suppose that you have an animated ng-repeat
implementation, as follows:
(style.css) .container { line-height: 30px; } .container.ng-enter, .container.ng-leave, .container.ng-move { transition: all linear 0.2s; } .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; } (index.html) <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> (app.js) angular.module('myApp', ['ngAnimate']) .controller('Ctrl', function($scope...