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 they are initially added, moved, or removed. Additions and removals should slide in and out from the left-hand side, and move events should slide up and down.
The initial setup, before animation is implemented, can be structured as follows:
(style...
