Creating AngularJS animation without CSS3

The AngularJS animation module enables us to create animations with CSS3 or JavaScript. Now we will learn how to animate an AngularJS directive using purely JavaScript so that we can create animations even for browsers without support of CSS3, or integrate with some commonly used JavaScript animations libraries such as jQuery animate and GSAP JS.

For this chapter, we will use jQuery as the JavaScript animations library because it's very intuitive and well known. We will integrate this library with AngularJS native directives so that we can easily get the built-in benefits of AngularJS and animate using jQuery. The documentation can be found at http://api.jquery.com/animate/.

First, we have to declare the animation using the animation() method; the declaration is really similar to the way in which you define an AngularJS factory. We specify the class of target elements where we want to display the animation on the first parameter of the animation...