AngularJS Web Application Development Cookbook

Staggering batched animations

AngularJS incorporates native support for staggering animations that happen as a batch. This will almost exclusively occur in the context of ng-repeat.

Getting ready

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 ...