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

Get AngularJS Web Application Development Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.