- 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.
@GoTrueTwit: #TrueTwit #TechTip.
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.
module to the root module of our application.
module. Now let us see how to animate some of the directives.
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.
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.
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:
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.
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.