Creating addClass animations with ngShow

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

• ngShow: This fires the addClass event after the ngShow expression evaluates to a truthy value, and just before the contents are set to visible

• ngHide: This fires the addClass event after the ngHide expression evaluates to a non-truthy value, and just before the contents are set to visible

• ngClass: This fires the addClass event just before the class is applied to the element

• ngForm: This fires the addClass event to add validation classes

• ngModel: This fires the addClass event to add validation classes

• ngMessages: This is fired to add the ng-active class when one or more messages are visible, or to add the ng-inactive class when there are no messages

Getting ready

Suppose that you want to attach a fade-out animation to a piece of the DOM that has an ng-show directive. Remember that ng-show does not add...