Chapter 9 ■ angularJS animation
A page listing various Angular modules appears. You want to download the angular-animate.js file (or the
minified version, angular-animate.min.js, if you prefer) into your angularjs folder. Later in this chapter, in the
“Applying Animations” section, you will see how to declare a dependency on this module.
CSS Animation Overview
It is possible to use JavaScript to create animations in Angular, but CSS is the preferred approach most of the time.
Given the nature of the animations that are typically done in Angular applications, CSS is often the easier and more
natural choice. Also, due to optimizations within most web browsers, CSS animation will also perform much better
than JavaScript animation.
With this in mind, we will do a whirlwind tour of CSS3 animation capabilities before we look at how we can apply
these skills in an Angular context. If you are already well-versed in CSS3, feel free to skip this section or use it as a
brief recap.
CSS animation is a relatively large topic, and much of it resides in the newer CSS3 specification. A modern web
browser is required to view most new animation features—something to keep in mind if you have users with older
browsers. On the upside, animation tends to degrade gracefully in many situations. For example, an application that
fades in a message would simply show that message suddenly, as opposed to fading it in gradually—hardly the end of
the world. Obviously, if it’s an issue for you, you should test your application, to be sure that it functions acceptably in
such scenarios.
Speaking broadly, there are three main parts to CSS3 animation: transforms, transitions, and the more advanced
Keyframe-based animation. They aren’t mutually exclusive, and you certainly don’t need to be an expert in all three to
make good use of animation. We will look at transforms and transitions here, as they are the easiest to start with, and
they will meet the majority of your needs when coding Angular apps. To begin, we will look at transforms.
Figure 9-1. Downloading additional modules