Beginning AngularJS

Chapter 9 ■ angularJS animation

The controller doesn’t do very much at all, aside from setting a simple Boolean variable named on. We will get
to its purpose shortly. It’s interesting that there isn’t more going on in the controller, given that we are performing an
animation, but that’s mainly because of the CSS-based approach to interacting with the ngAnimate service. Let’s take a
look at that now.
We have two CSS classes: one sets up the start of the animation, including the transition we want to use, and the
second is the end state of the animation. We know that this is a fade-in effect, because we can see that the opacity
starts out at 0 and finishes at 1 and that the transitions is dictating that this should occur over half a second. At this
stage, we have set up the classes needed to perform the animation, but what we haven’t done is tell Angular how and
when it should use these classes. What we need is some way to hook this into the $animate service. This is where the
naming conventions I mentioned earlier come into play.
The two CSS classes that we set up are used by Angular, but how and where did we tell Angular to use them?
Many Angular directives support and trigger animations whenever any major event occurs during their life cycle. So,
the trick to using the $animate service is to know which directives support animation and how to hook your CSS into
that directive. Table 9-1 shows which animation events are triggered and what directive triggers them.

Table 9-1. Supported Directives and Their Related Animation Events

Directive Animations

ngRepeat enter, leave, and move

ngView enter and leave

ngInclude enter and leave

ngSwitch enter and leave

ngIf enter and leave

ngClass add and remove

ngShow & ngHide add and remove (the ngHide class value)

We are using the ngIf directive in our example, and we can see from Table 9-1 that the enter and leave events
are supported. The way we hooked into these events was by setting the my-first-animation class on the directive,
which I have shown again following:

This class name can be whatever you like, though you should take extra care to make sure that it won’t clash
with anything else in your code or any other libraries that you might happen to be using. This class is effectively
the gateway into the $animate service, and it becomes the base class upon which we attach the Angular-generated
classes. The enter event uses the class names ng-enter and ng-enter-active. Thus, in order to respond to these
events through our own CSS, we made sure to add them to our base, or hook, class. Following, I’ve shown the class
names again. These conform to the naming convention required, so that Angular can make use of them at the right
moments in the directives life cycle.

.my-first-animation.ng-enter
.my-first-animation.ng-enter.ng-enter-active

As demonstrated in our example, these classes correspond to the start and end states of our animation. Keep in
mind that we have combined both CSS classes for the end state class. This is simply to avoid any CSS specificity conflicts.