AngularJS animation with CSS transitions

We need to know how to bind the CSS animation we learned about in Chapter 2, Understanding CSS3 Transitions and Animations, as well as the AngularJS directives listed in the previous table. The ngIf directive, for example, has support for the enter and leave animations.

When the value of the ngIf model is changed to true, it triggers the animation by adding the ng-enter class to the element just after the ngIf DOM element is created and injected. This triggers the animation, and the classes are kept for the duration of the transition. Then, the ng-enter class is removed. When the value of ngIf is changed to false, the ng-leave class is added to the element just before the ngIf content is removed from the DOM, and so, the animation is triggered while the element still exists.

To illustrate the AngularJS ngIf directive and ngAnimate module behavior, let's see what happens in a sample.

First, we have to declare a button that toggles the value of the...