AngularJS Web Application Development Cookbook

Creating move animations with ngRepeat

AngularJS provides hooks to define a custom animation when a directive fires a move event. The only AngularJS directive that fires a move event by default is ngRepeat; it fires a move event when an adjacent item is filtered out causing a reorder or when the item contents are reordered.

Getting ready

Suppose that you want to attach a slide-in or slide-out animation to a piece of the DOM that exists inside the ng-view directive. Route changes that cause the content of ng-view to be altered will trigger an enter animation for the content about to be brought into the page, as well as trigger a leave animation for the content about to leave the page.

Suppose that you want to animate individual pieces of a list when ...