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