Adding Animations in AngularJS 1.2
Disclaimer: Animations in AngularJS 1.2 are different than in older versions of AngularJS. Please follow the tutorial on Year of Moo to use animations with older versions of AngularJS.
In AngularJS 1.2 animations are not part of the core library anymore, so the animation package has to be included additionally. We install angular-animate via the Bower package manager.
Now, we load the animation package together with the AngularJS core library.
We have to register the animation package in the application, so we add ngAnimate as a dependency in the initialization of the MyApp application.
After these steps, we have animation enabled in the application and we can use CSS classes to define the elements that should be animated. The animations itself are declared with CSS transitions.
Animating Elements in ngRepeat
To enable animations in an existing ngRepeat directive, we simply add a CSS class anim.
We now define the CSS transition of the class anim.
That’s all we have to do, to add animations to an existing AngularJS application. A working demo of this example can be found here.
To quickly add more fancy animations, you can include Animate CSS, a predefined set of CSS transitions - ready to use.