Understanding Animation in AngularJS

Real apps may not need a lot of animation but, there could be some cases where an application might need to catch user’s attention to indicate that some change has happened. That is where animations come handy and Angular gives us the ngAnimate module to do just that. ngAnimate module gives our apps a way to animate in a data driven ‘Angular way’ so that we could hook into the events that Angular emits through some of its built-in directives.

To use the $animate service , we need to include the animation library after Angular in our HTML file:

Once we have included the animation library, we will have to include the ngAnimate module as a dependency to our app. This can be done when we instantiate our Angular app, like so:

The library adds animation support to the following directives on the specified events:

DirectivesEvents
ng-view
ng-include
ng-switch
ng-if
enter
leave
ng-repeatenter
leave
move
ng-show
ng-hide
ng-class
add
remove

Now that ngAnimate is included in our project, we can begin to create animations with Angular!

There are two ways to make use of animations when ngAnimate is used: by using CSS and JavaScript. Let’s take a closer look at how this is achieved, with an example.

CSS Animation

Consider a Single Page App where, when a user navigates from one view to another, the routing is resolved on the client side and a portion of the page is loaded with new content. This happens really fast and the user may not feel the change. We could add an animation in this step to make the transition appear smoother.

Taking a cue from the above table, ng-view raises two events when the view is changing. Let’s apply the following style when the view is changing.

Now that we got our css in place, all we need to do is apply the class view-fade on the ng-view directive.

With this, you should be able to see a slide effect when you navigate from one view to the other.

Play with the view transitions in the demo to get a better idea.

Similarly, we could apply animations to  ngRepeat and ngHide  directives. The following examples show how to do it.

ngRepeat

Play with the code here

ngHide

Play with the code here

JavaScript Animation

JavaScript animation has one major advantage—JavaScript is everywhere, and it has a wider acceptance than some advanced CSS3 animations. If you need to support browsers that do not support CSS transitions, then you can easily register a JavaScript animation with Angular and use it in your directives. JavaScript has more support in older browsers, and therefore, so do JavaScript animations.

When you include ngAnimate as a dependency of your Angular module, it adds the animation method to the module API. What this means is that you can now use it to register your JavaScript animations and tap into Angular hooks in built-in directives like ngRepeat. This method takes two arguments: className(string) and animationFunction(function).

The className parameter is simply the class that you are targeting, and the animation function can be an anonymous function that will receive both the element and done parameters when it is called. The following code explains how this is done on ngRepeat using jQuery for the actual animations:

Now apply the fade class on ngRepeat as below:

Note that ngAnimate does not actually do any animations. Rather, it provides you with access into Angular’s event loop so that you can do your own DOM manipulation or CSS3 animations at a proper, data-driven point.

If you would like to explore more about ngAnimate and how to apply animations on other directives, visit nganimate.org

Top