Adding CSS Animations to AngularJS Applications

AngularJS is meant for building rich data bound applications on the web. Adding animations to these applications feels just like having your favorite pizza with toppings. Animations not only add beauty to the UI, but they also make it more user friendly. A small animation in an app may elevate its richness to a level which is otherwise very difficult to achieve.

With the power of the web these days, there are several ways to create animations. Until fairly recently, the animations were possible only with JavaScript. But now that we have CSS3 supported well by all the major browsers, we can animate our sites with just CSS.

Animations were supported in AngularJS in version 1.1.5 beta. It underwent a number of changes before a stable version of the feature was released in AngularJS 1.2. Animation support in an Angular application can be added or removed very easily. The library brings very good support for both CSS based and JavaScript based animations. Though animations can be written in JavaScript, it is recommended to use CSS animations. This is because CSS animations are treated with low priority by the browser, and they don’t block the processing thread when the thread could be doing something important.

In this article, we will see how CSS animations can be used to make the behavior of built-in directives of AngularJS attractive. Going through the capabilities of animations supported in CSS is beyond the scope of this article. You can refer to the CSS channel on SitePoint to learn more.

Getting Started

To use animations, we need to include the angular-animate.js library and add the module ngAnimate as a dependency in the module, as shown below.

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

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

Directives	Events
ng-view ng-include ng-switch ng-if	enter leave
ng-repeat	enter leave move
ng-show ng-hide ng-class	add remove

These events are generated automatically when there is any change in the state of the directives. The important thing to remember is, these events are generated only when the module ngAnimate is passed as a dependency in the application module. When these events are fired, they add CSS classes on the applied element. The corresponding names of the CSS classes are mentioned in the above table. As you can see, we are given liberty to define behavior when the event is happening and also after the event has happened.

Animating ng-view

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 sometimes the user may feel that the change in the view is too spontaneous. An animation in this step would make the transition smoother.

Referring to the above table, we see that ng-view raises two events when the view is changing. Let’s apply the following style when the view is changing.

.view-slide-in.ng-enter {
  transition: all 1s ease;
  -webkit-transition:all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  
  opacity:0.5;
  position:relative;
  opacity:0;
  top:10px;
  left:20px;
}

The above CSS applies an ease transition on the applied element with the duration of the transition being 1 second. But, the above styles alone don’t have any effect as we didn’t say which property of the element to be changed during the transition. Let’s manipulate values of some of the CSS properties:

.view-slide-in.ng-enter {
  opacity: 0;
}
.view-slide-in.ng-enter.ng-enter-active {
  top:0;
  left:0;
  opacity: 1;
}
.view-slide-in.ng-leave.ng-leave-active{
  top:5px;
  left:5px;
  opacity:1;
}
.view-slide-in.ng-leave{
  top:0;
  left:0;
  opacity:0;
}

Now all we need to do is, apply the class view-fade on the ng-view directive.

<div ng-view class="view-slide-in"> </div>

Now, you will be able to see a slide effect when you navigate from one view to the other. You can apply any transition or you can even define your own key-frame animation. You can play with the view transitions in the demo to get a better idea.

Animating ng-repeat

It is almost impossible to avoid ng-repeat in an AngularJS application. We end up using most of the capabilities of the directive, like updating the model, adding items to or removing items from the collection, applying sorting and filtering in the items. Items in the directive keep moving and changing when we perform these operations.

Let’s apply a linear transition over opacity of the elements to see the items changing.

.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
  -webkit-transition: all linear 1s;
  -moz-transition: all linear 1s;
  -o-transition: all linear 1s;
  transition: all linear 1s;
    
  position:relative;
  left:5px;
}
.repeat-animation.ng-enter {
  opacity: 0;
}
.repeat-animation.ng-enter.ng-enter-active {
  opacity: 1;
}
.repeat-animation.ng-leave {
  opacity: 1;
}
.repeat-animation.ng-leave.ng-leave-active {
  opacity: 0;
}
.repeat-animation.ng-move {
  left:2px;
  opacity: 0.5;
}
.repeat-animation.ng-move.ng-move-active {
  left:0;
  opacity: 1;
}

Now when any operation is performed on the list, we will see a mix of fading in and a little shake effect on the items. The effect is caused by changing value of the left position property of the item in the ng-move classes created above. Apply any random filtering and sorting to the item list in the demo and observe the behavior of the elements.

Animating ng-hide

Animating ng-hide is similar to animating ng-view. The only difference is, we need to apply ng-add and ng-remove classes instead of ng-enter and ng-leave. Let’s make the items fade in or out when they are shown or hiddeb by the ng-hide directive. The same animation can be applied to ng-show by reversing the events.

.hide-fade.ng-hide-add, .hide-fade.ng-hide-remove {
  -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition:all linear 1s;
  display:block!important;
}
.hide-fade.ng-hide-add.ng-hide-add-active,
.hide-fade.ng-hide-remove {
  opacity:0;
}
.hide-fade.ng-hide-add,
.hide-fade.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}

View this animation in action in the demo. The checkbox on the right side of the first page hides or shows some of the items in the repeater.

Conclusion

As the power of web browsers grows every day, our clients expect us to use the full power of the features and ship a nice product to them. Animation support in CSS is an in demand feature. It is far easier to write and use animations with CSS rather than writing several lines of JavaScript code to do the same thing. I hope you have found this tutorial useful, and I look forward to hearing your feedback.