Sharing Top Content from the Angular-sphere.

JavaScript Animations in AngularJS Applications

  • One of the key features that Angular brings is the support of animations .
  • One of the animations can be applied on the custom directive just as we applied the animations on the built-in directives.
  • Animations, when used appropriately and functionally, bring life to applications.
  • To apply an animation, we need to handle the cases of adding and removing the CSS class.
  • We can define either a CSS transition or a custom JavaScript animation to see the animation happening.

Ravi Kiran looks at dealing with JavaScript-based animations in the AngularJS framework, helping us improve the UI of our one-page apps.

@GoTrueTwit: #TrueTwit #TechTip.
JavaScript animations with AngularJS:

#TrueTwit

AngularJS is a feature-rich framework for creating single-page web applications, bringing all capabilities that one needs for building rich and interactive apps. One of the key features that Angular brings is the support of animations.

We can animate a portion of the application to indicate a change occurring. In my last article I covered the support of CSS animations in Angular applications. In this article, we will see how to leverage JavaScript to animate the AngularJS apps.

module to the root module of our application.

The animation events to be handled in the JavaScript animation also remain the same. Following is a list of directives supporting animations and their events for different actions:

module. Now let us see how to animate some of the directives.

A basic skeleton of a custom JavaScript animation is as follows:

Here are some things to keep in mind when writing a JavaScript animation in AngularJS:

We have a number of JavaScript libraries like jQuery, Greensock, Anima and several others that ease the work of writing animations. To keep things simple, I’m using jQuery for creating animations in this article. To learn about the other libraries, you can visit their respective sites.

directive takes place when a user switches between views of an AngularJS application. As listed in the table above, we can animate when a view enters or leaves. It is not necessary to handle both of these cases; we can animate the one that seems necessary.

Following is an animation that induces some visual effect when a view is entering:

method is passed as the callback. This is to indicate that the animation is complete and now the framework can continue with the next action.

method is called. We didn’t have to convert the element to a jQuery object as the jQuery library is loaded before loading AngularJS.

directive. Though the animation is defined in JavaScript, by convention we apply it using a class on the target directive.

is one of the most important directives, with a number of options available. Two of the basic operations of the directive are filtering and sorting. Items under the directive are added, removed, or moved, depending on the kind of action performed.

Let’s apply some basic animations so that one can see when a change is happening.

CSS class on the target element. To apply an animation, we need to handle the cases of adding and removing the CSS class. The name of the class is passed to the animation handler class. This lets us inspect the class and take appropriate action.

directive:

should be loaded to make best use of the service.

Using the same demo as the last article, we’re presenting a page with a list of courses. We create a directive to show details of a course in a box, and the contents of the box would change after clicking the “View Statistics” link. Let’s add an animation to make the transition visible to the user.

We’ll add a CSS class when the transition happens and we’ll remove the class once the animation is complete. Below is the code for this directive:

being added and removed very quickly. We can define either a CSS transition or a custom JavaScript animation to see the animation happening. Following is a sample CSS transition that can be used with the above directive, vendor prefixes omitted for brevity:

Alternatively, here is a jQuery animation to use for the same directive:

One of these animations can be applied on the custom directive just as we applied the animations on the built-in directives.

You can see all of the above animations in action on the demo page.

Animations, when used appropriately and functionally, bring life to applications. As we’ve seen, AngularJS has rich support for both CSS and JavaScript animations. You can choose one of these based on your team’s circumstances.

But use of a lot of animations may lead to a slower application and the application may seem over-engineered to an end user. So, this weapon has to be used carefully and optimally.

JavaScript Animations in AngularJS Applications

Comments are closed, but trackbacks and pingbacks are open.