Animating or transitioning view changes in AngularJS

Since AngularJS 1.2.0 we've had the ability to do native animations in Angular using CSS classes, transitions and keyframes. I've been working on a site recently where it called for transitions to be used between view changes heavily. Thankfully this is made really easy using the ngAnimate module.

Prerequisites

If you haven't already, go and fetch the ngAnimate module that matches your version of AngularJS from angularjs.org and pop this into your module's dependency list.

ngAnimate

We can set a global transition for all pages or set them per view which I think is much more interesting. This just requires us to change a class on our ng-view element.

The easiest way of doing this is to just assign a CSS class to a model on our controller. We can then pull this out on the ng-view element in our HTML.

$scope.viewClass = 'animate-home';

Then we just display this in the usual fashion.

<div ng-view class="{{viewClass}}></div>

As we've included the ngAnimate module, when our view changes Angular will automatically add/remove classes from the entering and exiting views.

With ng-view these classes are .ng-enter and .ng-leave.

Animating with CSS

The .ng-leave class will be called on the exiting view. We can globally reference it to call a specific animation on every view.

.ng-leave{
  top: 0;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: downfromtop;
          animation-name: downfromtop;
}

@-webkit-keyframes downfromtop {
  0%{
    top: 0;
  }
  100% {
    top: 100%;
  }
}

@keyframes downfromtop {
  0%{
    top: 0;
  }
  100% {
    top: 100%;
  }
}

This will slide the view we're navigating away from down. Let's do the reverse and bring the entering view up from the bottom as well.

.ng-enter{
  top: 0;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: upfrombottom;
          animation-name: upfrombottom;
}

@-webkit-keyframes upfrombottom {
  0%{
    top: 100%;
  }
  100% {
    top: 0;
  }
}

@keyframes upfrombottom {
  0%{
    top: 100%;
  }
  100% {
    top: 0;
  }
}

"But what if I want to have a different transition for each view?"

Thanks to the fact these are just CSS class we can utilise that one we setup in our view's controller. We simply just need to change our CSS delaration to include it.

.animate-home.ng-leave{
  /*...*/
}

And that's it! You can add as many transitions as you'd like by just adding the CSS class name to your controller.

Remember, transitions don't work on inline elements so if you're using ng-view as an element and not an attribute, be sure to set it to display: block;

The ngAnimate module can also be used for a bunch of other cool things like animating ng-repeat additions/deletions or animating the hiding/showing of elements.

If you haven't yet, be sure to check the documentation for the module.