Animations in AngularJS with ngAnimate

Adding Animations to any web applications is like sprinkling toppings on a cake. Animations enhances user interface by making it smooth and more attractive, which ultimately enhances user experience.

Animations can be done using javascript or css3, Angular js makes adding animations easy.

To implement animations in AngularJs we need to add the angular-animate.js library and inject the ngAnimate dependency into our application and of-course we need angular.js

CDN: https://code.angularjs.org/1.3.15/angular-animate.js


var foodApp = angular.module('foodApp',['ngAnimate']); //adding dependency


DEMO  DOWNLOAD

Angular animate provides animation hooks to common directives like ng-repeat,ng-hide,ng-switch,ng-view etc.
Animations can be added as css rules to these hooks or can even be done in javascript using $animate service.

Common directives and supported animations.

Angular js adds some classes when major events take place wrt these directives.
EG: ng-enter when the element is about to display.

Note: These hooks and classes are not availaible without angular-animate.

Example

In this example we will be adding animation to an ng-if directive.

Step 1:Add an anchor class

Add a class to your element.The class name can be anything, we will use this class as an anchor, to add our animations. Below I’ve added food-table class to our food table (Note it can be any element, I’ve just picked it from my other tutorials)

......

Step 2:Add your directive to your element.

Now we will add our ng-if directive with a condition to include or delete our element (In this case element is our food table.)

....

Adding a button to reverse the value of showTable every-time on click using ng-click.This will add or delete our element.
Remember we are adding animations to our ng-if directive.

....

Toggle


Final thing we will do in step 2 is initialize $scope.showTable to true in our controller , so that our element displays on load.


var foodApp = angular.module('foodApp',['ngAnimate']);
foodApp.controller('foodCtrl',function($scope){
....
$scope.showTable = true; //initialize to true
...
});


Step 4:Adding animation rules in css


.food-table.ng-enter {
-webkit-animation:1.5s anim_enter;
-moz-animation:1.5s anim_enter;
-o-animation:1.5s anim_enter;
animation:1.5s anim_enter;
position:relative;
}
@keyframes anim_enter {
from {
left:100%;
}
to {
left:0;
}
}

@-webkit-keyframes anim_enter {
from {
left:100%;
}
to {
left:0;
}
}

.food-table.ng-leave{
-webkit-animation:1.5s anim_leave;
-moz-animation:1.5s anim_leave;
-o-animation:1.5s anim_leave;
animation:1.5s anim_leave;
position:relative;
}

@keyframes anim_leave {
from {
left:0;
}
to {
left:100%;
}
}

@-webkit-keyframes anim_leave {
from {
left:0;
}
to {
left:100%;
}
}

.food-table.ng-leave:
These rules are triggered when the element is about to be removed from the dom.ng-leave class is automatically added by AngularJs when the element is about to be removed from the DOM( In case of ng-if )

anim_leave: Name of the animation.

@keyframes anim_leave: Key frame rules for anim_leave.

We are changing the position left from 0 to 100 and over a duration of 1.5 sec hence the element will appear to be exiting the page from the right.

Related Article : CSS3 Animations

Similarly ng-enter class is added by AngularJs when the element is added to the DOM ( in case of ng-if )

Angular Js also provides add and remove hooks to classes added and removed using ng-class.Using this we can add animation in between to elements when a css class is added or removed.

Example

Step 1 : Add you class expression.


ng-class="{'selected':$index == selectedRow}"


Step 2 : Add animations to css hooks wrt that class.


.selected-add,.selected-remove {
transition: 300ms linear all;
}

.selected,.selected-add.selected-add-active {
font-size:3em;
background-color:#00AEEF;
color:white;
}

.selected-remove.selected-remove-active {
background-color:#707070;
font-size:1em;
}


Here the class specified in ng-class is .selected.Now angular js will add hooks such as .selected-remove , .selected-add etc. We have added animation to these hook classes to show animation in between.

In my example I’ve added ng-class expression to rows in ng-repeat and the selected class is applied when the row gets selected using arrows.However the animations can be added to other elements and classes not necessarily in ng-repeat.

Related Article : Highlight a selected row in ng-repeat using ng-class

AngularJs also provides animation via the $animate service, so animations can also be done using javacript. Using this strategy, can leverage re-usability but keep in mind browser runs javascript on higher priority than css, this will stop any other execution until the animation is completed when done using javascript.
Check out the AngularJs Documentation for an example.

With the increasing power of modern browsers ,the performance issues with animations is fading away.Not to mention the fact that animations make your application cool and interesting.

AngularJs provides a clean and easy way to animate directives using the ngAnimate module,so goahead and try it in your next project.