Chapter 9 ■ angularJS animation
Applying Animations
You don’t work directly with the $animate service when applying animations in Angular. Instead, you use supported
directives and a special naming convention when writing your CSS. Essentially, you interact with the $animate service
through CSS hooks that allow Angular to trigger your animations at certain points in a directives life cycle. This will
make a lot more sense as we progress through this section.
We’ll jump right in with a code listing. Listing 9-4 shows a fairly easy and common type of animation: a typical
fade-in effect. This one is used simply to fade in a small piece of content when the Toggle Content button is clicked.
Listing 9-4. A Basic Fade-in Animation, animate-one.html
<!DOCTYPE html>
This content will fade in over half a second.
There are a couple of very important things to note in Listing 9-4. We use a script reference to make sure that we
pull in the ngAnimate module, and we declare a dependency on this module when we create our application module.
These steps appear in bold, and they are the first steps I would recommend that you check whenever you run into any
issues getting an animation to work.