Easy Animations For AngularJS With Animate.css

Tuesday, February 25, 2014

Animations in AngularJS can be slightly tricky. First you need to learn about the classes that Angular adds to an element during an animated event, and then you have to write the correct CSS to perform an animation. There are also special cases to consider such as style rules that require !important and Angular’s rule of cancelling nested animations.

There is a detailed look at animations on yearofmoo, but the basic premise is that Angular will add and remove CSS classes to DOM elements that are entering, leaving, showing, hiding, and moving.

First, Angular adds a class to prepare the animation. For example, when a view is about to become active, angular adds an ng-enter class. This class represents a preparation phase where a stylesheet can apply the transition rule and identify which properties to transition and how long the transition should last, as well as the initial state of the element. Opacity 0 is a good starting point for a fade animation.

div[ng-view].ng-enter {
    transition: all 0.5s linear;
    opacity: 0;
}

Next, Angular will apply a class to activate the animation, in this case .ng-enter-active.

div[ng-view].ng-enter-active {
    opacity: 1;
}

Angular will inspect the computed styles on an element to see how long the transition lasts, and automatically remove .ng-enter and .ng-enter-active when the animation completes. There is not much required for a simple animation like this.

With Animate.css

Animate.css is to transitions what Bootstrap is to layout, which means it comes with a number of pre-built and easy to use styles. Animate uses keyframe animations. which specify the start, end, and in-between points of what an element should look like, and although Animate is not tied to Angular, keyframes make Angular animations easier because there is no need to specify the “preparation” phase. Also, complicated animations roll up into a single keyframe name.

So, for example, the previous 7 lines of CSS for animating the entrance of a view become the following 4 lines of code, which not only fade in an element, but give it a natural bounce.

div[ng-view].ng-enter {
    -webkit-animation: fadeInRight 0.5s;
    animation: fadeInRight 0.5s;
}

The ng-hide and ng-show directives need a little more work to function correctly. These animations use “add” and “remove” classes, and adding !important is a key to override the default ng-hide style of display:none.

.ng-hide-remove {
    -webkit-animation: bounceIn 2.5s;
    animation: bounceIn 2.5s;
}

.ng-hide-add {
    -webkit-animation: flipOutX 2.5s;
    animation: flipOutX 2.5s;
    display: block !important;
}

Hope that helps!


Comments
gravatar Khalid Abuhakmeh Tuesday, February 25, 2014
Wow! I've never heard of Animate.css. I now have a bunch of users who will be really annoyed by an overuse of animations :P, but seriously it is really cool and great post.
gravatar Alex Turok Tuesday, February 25, 2014
Oh, Scott, thank you for this post - it seems that it's another time when you totally made my day. I am building a very simple Angular app and messed up with animations a bit - animate.css seems right what I need now. Thanks for highlighting it as well as demonstrating how it is used with Angular!
gravatar Bill Jones Saturday, March 1, 2014
This is an interesting post. I'd really be interested in seeing how to use effeckt.css with AngularJS. In my opinion, Effeckt.css looks more performant and provides more animation options. However, I've been unable to figure out how to use it with a ng-view in AngularJS.
Daniel Mackay Saturday, March 22, 2014
ng-animate + animate.css is king combination! Thanks for the example on how to combine these.
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!