Easy Animations For AngularJS With Animate.css

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!