Get Moving With Angular 1.2 Animation and Animate.css

Motion is quickly becoming one of the most important emerging techniques in building a quality user experience on the web. Angular 1.2, currently in release candidate form, provides an overhaul of Angular's animation system and makes it spectacularly easy to bring your interface to life.

Of course, hand keying animations can be time consuming especially when you're trying to prototype something in quick order. Luckily, Animate.css provides a library of ready-to-go animations that can be dropped in quickly and easily. But how can we use these together?

Introduction to Angular 1.2 Animations

Animations in Angular 1.2 take a very simple convention-based approach. Here's basically how it works:

Angular automatically detects and triggers animations based on certain events (namely enter, leave, and move)
When one of those events occur, Angular automatically attaches a special class to the element (for example ng-enter when a new item is added to a list, for example)
This class can be used for setup (for example, to set attributes for the "before" of a transition), but after this class is applied another class is applied (ng-enter-active, for example) to indicate that the animation should begin.
The ng-{event} and ng-{event}-active classes are removed automatically after the animation concludes (determined by introspecting the CSS and determining transition duration)

This all sounds relatively complex, but it's actually quite simple in practice. Basically, for a custom animation you would just need to define some CSS like so (vendor prefixes omitted for brevity):

.some-element.ng-enter {
  transition: height 1s;
  height: 0px;
  overflow: hidden;
}

.some-element.ng-enter-active {
  height: 100px;
}

The above code would automatically resize an element from zero height to 100px over the course of 1 second when the "enter" event is triggered.

Animating on CSS Class Changes

In addition to events like enter and leave, Angular provides the ability to attach animations to the addition and removal of any class. One of the most common ways would be for show/hide. If I have:

<div class="fader" ng-hide="checked">Animate this!</div>

This works basically the same as if I had this:

<div class="fader" ng-class="{'ng-hide': hidden}">Animate this!</div>

To trigger animations when classes are added and removed, you just apply transitions or animations to the class name with -add and -remove postfixes. Here's an example of how I might make a fading animation for ng-hide:

.fader.ng-hide-add {
  opacity: 1.0;
  display: block !important;
  transition: opacity 1s;
}

.fader.ng-hide-add-active {
  opacity: 0;
}

Activating Angular 1.2 Animations

To use animations in your Angular code, you will need to include the separate angular-animate.js file. If you're using Google's CDN, you can include both Angular 1.2 and Angular Animation in your code. You will also need to create an angular module that consumes the ngAnimate provider to activate animations:

<html ng-app="myApp">
  <head>
    <!-- Angular and Angular Animation -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js"></script>
    <script>
      var app = angular.module('myApp', ['ngAnimate']);
    </script>
  </head>
  <body>
    <!-- Animations are active now! -->
  </body>
</html>

One of the most powerful aspects of Angular 1.2 animation is that you don't have to specifically invoke it; instead, it "just works" when any animation-triggering event happens in your page.

Bringing in Animate.css

But what about that nice library of existing animation we already have with animate.css? Simple: because Animate.css provides named keyframe animations, you simply need to apply the given animation to the element when the appropriate Angular animation class is applied. Here's a simple fade in/fade out scenario:

.my-element.ng-enter {
  animation: fadeIn 1s;
}

.my-element.ng-leave {
  animation: fadeOut 1s;
}

That's seriously all there is to it! You can use any of the named animations from Animate.css in the same manner and it will all work, fast and easy.

To demonstrate how easily this can be accomplished, I used Divshot to quickly snap together a "todo list" interface and added some animations. I've published the result to JS Bin, just click below to see the code.

View Todo List Demo

Get Moving with Angular 1.2 Animation and Animate.css

Introduction to Angular 1.2 Animations

Animating on CSS Class Changes

Activating Angular 1.2 Animations

Bringing in Animate.css

Michael Bleigh