Introduction

AngularJS incorporates its animation infrastructure as a separate module, ngAnimate. With this, you are able to tackle animating your application in several different ways, which are as follows:

• CSS3 transitions

• CSS3 animations

• JavaScript animations

Using any one of these three, you are able to fully animate your application in an extremely clean and modular fashion. In many cases, you will find that it is possible to add robust animations to your existing application using only the AngularJS class event progression and CSS definitions—no extra HTML or JS code is needed.

This chapter assumes that you are at least broadly familiar with the major topics involved in browser animations. We will focus more on how to integrate these animations into an AngularJS application without having to rely on jQuery or other animation libraries. As you will see in this chapter, there are a multitude of reasons why utilizing AngularJS/CSS animations is preferred to their respective counterparts in...