How to Create Animations in AngularJS With ngAnimate

How to Create Animations in AngularJS With ngAnimate

When used properly, animations can make a web application fun to use. Modern browsers are capable of animating different elements on a webpage by using just CSS. If you are using AngularJS in one of your projects, you can also use the ngAnimate module to add animation to it in the Angular way.

The ngAnimate module allows you to add CSS as well as JavaScript-based animations to your projects. The CSS-based animations include keyframes and transitions. The JavaScript-based animations need to be registered using module.animation(). In this tutorial, you will learn how to add CSS animations to built-in animation-aware AngularJS directives to make your apps more appealing.

The Basics

The first thing that you need to do to add animations is include angular-animate.js in your project. Once done, you can include the ngAnimate module as a dependency in your app to start animating different elements. 

angular.module('app', ['ngAnimate']);

Here is a list of different animation-aware directives and the animation events that you can use to animate them:

• ng-repeat can detect enter, leave and move events.
• ng-view, ng-include, ng-switch and ng-if can detect enter and leave events.
  
• ng-show, ng-hide and ng-class can detect add and remove events.
• ng-message can also detect enter and leave events.

You should remember that these animation hooks are not enabled by default; they only become active after you add the ngAnimate module to your app.

Animating ng-if Using CSS3 Transitions

The ng-if directive in AngularJS is used to add or remove elements from the DOM based on the value of a given expression. When the expression evaluates to false, the element is removed from the DOM. When the expression evaluates to true, a clone of the element is reinserted into the DOM. This addition and removal of elements is instantaneous. However, you can animate the elements that are being removed or recreated using the ngAnimate module.

If the elements are being added to the DOM, you can use the ng-enter and ng-enter-active classes to animate them. The transition code as well the starting animation state are added within the ng-enter class. The final animation state is added within the ng-enter-active class. Here is the code to show some red bars by animating their height.

.red-bar.ng-enter {
  transition:all ease-in 0.25s;
  height: 0px;
}

.red-bar.ng-enter.ng-enter-active {
  height: 30px;
}

Similarly, you can also apply an animation to hide the bars using the ng-leave and the ng-leave-active classes. I have left out the animation for removing the red bars so that you can clearly see the difference between animated and non-animated states.

Animating ng-view Using CSS3 Transitions

The ng-view directive in AngularJS is used as a container to reload a portion of the page when the user switches between different views. 

Just like the addition and removal of elements using ng-if, this process also happens very quickly. If you want to animate the entering and leaving of different elements into the view, you can use the same old ng-enter, ng-enter-active, ng-leave, and ng-leave-active classes. 

Besides these four classes, there is also an ng-animate class. During the course of the animation, this class is also added to all the elements which need to be animated. You can use it to provide all the CSS rules that need to be applicable during the course of the animation. Here is an example:

.planet-view.ng-animate {
  transition: all ease 0.4s;
  position: absolute;
}

.planet-view.ng-enter {
  top: 200px;
  opacity: 0;
}

.planet-view.ng-leave, 
.planet-view.ng-enter.ng-enter-active {
  top: 0;
  opacity: 1;
}

.planet-view.ng-leave.ng-leave-active {
  top: -200px;
  opacity: 0;
}

As you can see in the above code, a transition duration of 0.4 seconds has been applied on all the properties. When the information for a specific planet enters the view, it starts with an opacity of zero and the top position set to 200px. At the same time, the elements which are about to leave the view have an opacity of 1. 

By the end of the transition, the entering elements reach the top position of the view and become completely opaque. Similarly, the leaving elements animate to a position 200px above the view and fade away. This gives us a nice effect where the information appears to fade in from the bottom of the page and fade out at the top of the page. 

In the following ng-view demo, try clicking on the name of different planets to see the enter and leave animations in action.

The information about the atmospheric composition of terrestrial planets has been taken from this page.

Animating ng-repeat Using Keyframe Animations

The ng-repeat directive in AngularJS is used to instantiate a template once per item in a given collection. This directive is used when you are trying to sort, filter, add or remove items from a collection. There are three animation events that can be triggered with ng-repeat.

• enter: This event is triggered whenever you add a new item to the list or an item in the list is revealed after applying a filter.
• leave: This event is triggered whenever you remove an item from the list or an item in the list is filtered out.
• move: This event is triggered when an adjacent item is filtered out and the concerned item needs to be reordered.

In the last two sections, you have used CSS transitions to animate different elements. In this section, you will learn how to animate different elements using keyframe animation. I will provide the code for both the transition and the keyframe animation so that you can see the difference between the two. 

Here is the transition code to animate the items:

.task-item.ng-enter,
.task-item.ng-leave {
  transition:all linear 0.25s;
}

.task-item.ng-leave {
  top: 0;
  opacity: 1;
}

.task-item.ng-leave.ng-leave-active {
  top: 200px;
  opacity: 0;
}

.task-item.ng-enter{
  opacity:0;
  top: -500px;
}

.task-item.ng-enter.ng-enter-active {
  opacity:1;
  top: 0px;
}

As you can see, this code is very similar to the transition code that we have been using up to this point. The starting states are defined in ng-enter and ng-leave. The ending states are defined in ng-enter-active and ng-leave-active. 

The following code recreates the same effect using keyframe animations.

@keyframes added {
  from {
    opacity: 0;
    top: -500px;
  }
  to {
    opacity: 1;
    top: 0px;
  }
}

@keyframes deleted {
  from {
    top: 0;
    opacity: 1;
  }
  to {
    top: 200px;
    opacity: 0;
  }
}

.task-item.ng-enter {
  animation: 0.25s added;
}

.task-item.ng-leave {
  animation: 0.25s deleted;
}

This time, we are using the CSS animation property to add the animation. The actual animation is defined using @keyframes. The initial and final state of different items has been defined within the keyframes themselves. Please note that we don't have to use the ng-enter-active and ng-leave-active classes anymore. One benefit of using keyframes is that now the animation can much more complicated than a simple transition.

Try adding and deleting some tasks in the following demo to see the animation in action.

Using ngAnimate With ngMessages

Envato Tuts+ has also published a tutorial on validating your forms using ngMessages. In the last section of that tutorial, you learned how to show error messages only after a user has actually touched an input field. All the error messages in that tutorial appear and disappear instantly. 

If you want to add a subtle animation to show or hide the error messages, you can do so easily using the ngAnimate module. As mentioned in the beginning of this tutorial, ng-message can detect enter and leave events. This means that you can use the ng-enter and ng-enter-active classes to specify the initial and final state of error messages currently being shown to the users. Similarly, you can use the ng-leave and ng-leave-active classes to specify the initial and final state of error messages that are in the process of being hidden from the users.

Here is an example of changing the opacity property for error messages.

.error-msg.ng-enter {
  transition: 0.5s linear all;
  opacity: 0;
}
.error-msg.ng-enter.ng-enter-active {
  opacity: 1;
}

I have added an error-msg class to all the error messages, and you can add your own classes and update the code accordingly. In this case, I have not applied any animation of error messages that have become invalid and should no longer be shown to users. This means that they will disappear instantly. Here is the demo that shows how to use ngMessages and ngAnimate together.

Conclusion

This tutorial taught you how to add animation to your AngularJS web apps using the ngAnimate module. You also learned how to apply different animations to an element based on the triggering event. The final section covered how to use the ngAnimate module with other modules like ngMessages to add nice animations to error messages. 

One thing that you have to keep in mind while using animations is that you should not overuse them. Too many animations can distract the users from the main function of the app. Only use animations when you think that they can actually enhance the user experience. 

I hope you enjoyed this tutorial. If you have any tips, suggestions or questions related to the ngAnimate module, please comment.