Animations in AngularJS with ngAnimate

March 28, 2015
by Rahil Shaikh

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.

Lock and Load

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

Concept

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-animate

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.

Lets do this

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)

<table class="table table-bordered food-table" > <!--adding anchor class to element -->
......
</table>


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.)

<table class="table table-bordered food-table" ng-if="showTable"> <!--Adding ng-if condition-->
....
</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.

<table class="table table-bordered food-table" ng-if="showTable"> <!--Adding ng-if condition-->
....
</table>
<button class="btn btn-primary" ng-click="showTable = !showTable">Toggle</button>

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 )

Animating with ng-class:

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

Tip

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.

Watch Video tutorial

Conclusion

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.

About

Engineer. Blogger. Thinker. Loves programming and working with emerging tech. We can also talk on Football, Gaming, World Politics, Monetary Systems.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

4 comments

  1. Zac
    |

    thanks you

      • |

        Hi, The effect on the rows is dude the class toggle using ng-class, so if you want to achieve this same effect in this way, you would need to write an attribute directive that will be attached on the row and will listen to the hover event and set the class accordingly. 🙂

Leave a Comment