Creating enter animations with ngIf

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

• ngIf: This fires the enter event just after the ngIf contents change, and a new DOM element is created and injected into the ngIf container

• ngInclude: This fires the enter event when new content needs to be brought into the browser

• ngRepeat: This fires the enter event when a new item is added to the list or when an item is revealed after a filter

• ngSwitch: This fires the enter event after the ngSwitch contents change, and the matched child element is placed inside the container

• ngView: This fires the enter event when new content needs to be brought into the browser

• ngMessage: This fires the enter event when an inner message is attached

Getting ready

Suppose that you want to attach a fade-in animation to a piece of the DOM that has a ng-if directive attached to it. When the ng-if expression evaluates to true, the enter...