Creating leave and concurrent animations with ngView

AngularJS provides hooks used to define a custom animation when a directive fires a leave event. The following directives will generate leave events:

• ngIf: This fires the leave event just before the ngIf contents are removed from the DOM
• ngInclude: This fires the leave event when the existing included content needs to be animated away
• ngRepeat: This fires the leave event when an item is removed from the list or when an item is filtered out
• ngSwitch: This fires the leave event just after the ngSwitch contents change and just before the former contents are removed from the DOM
• ngView: This fires the leave event when the existing ngView content needs to be animated away
• ngMessage: This fires the leave event when an inner message is removed

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