Tutorial 12: AngularJS Animation | ngAnimate AngularJS

For this tutorial, I am going to write about angularjs animation, for this we need to continue working on the example from previous tutorial. You can download required files here.

The $animate service allows you to provide transition effects when elements are added, removed, or moved in the DOM. The $animate service doesn’t define any animations itself but relies on the CSS3 animation and transition features. The $animation service is defined within an optional module called ngAnimate that must be downloaded into the angularjs project folder. Go to http://angularjs.org, click Download or download directly here.


You need to include, angularJS animate module in your root file i.e index.html like this:

This is how we include extra modules.


Goto controllers.js file and REPLACE first line with this:

added ngAnimate dependency here in module. Rest of the line is same.


Where you want animation to appear? In my case I want it in list.html which holds guitars list. So lets goto li tag (which shows us list) in list.html and add the following ng-Animate directive. You need to goto end of file and just before the closing div replace the entire ul with this thing (don’t replace the search part):

you see all the code is the same but li has a new directive called ng-Animate=”‘Animate'” that tells angularJS to animate this piece of code when anything enter, leave or move.


Now is the tricky part, we added ng-animate in li which has a class of itemHolder. so we need to go to styles.css and add and replace some transition style to itemHolder class and its hover state, like this:

if you want you can also put fade in/out effect to page switching. To do this, we know that our partials (list.html and details.html) are loading in index.html file inside a div with class ‘main’. So, let just add transition effect to main class in styles.css like this:


Last thing, we need to add angularJS specific csss3 classes in styles.css to deal with enter, leave or movement of data. Lets just add these styles at the end of styles.css like this:

you probably looking for ng-enter or other above mentioned classes in html file but you wont find it. Reason is, this is generated by angularJS on that ng-Animate directive that we placed in list.html whose dependency is in controllers.js. ng-enter means when data is entered its opacity must be zero and height equals zero, same applies to leave and hide. In next class style, it says when data has been loaded its opacity must be 1, same applies to leave active.

DEMO  < I’m a link

Try searching, sorting and clicking guitars

Video Tutorial

Download Project files

Hope you like it. Please share my work.

Previous-Chapter-Buttonnext-AngularJS MVC