AngularJS Animations in Version 1.2+

If you’re new to AngularJS check out my AngularJS in 60-ish Minutes video tutorial or download the free eBook. Also check out The AngularJS Magazine for up-to-date information on using AngularJS to build Single Page Applications (SPAs).

 

image

 

In a previous post I mentioned a small but important change to routing in AngularJS 1.2+. Anytime you want to include routing, animations, and touch (to name just 3) you’ll need to load the appropriate script and reference the external module in your app’s module dependencies. For example, to include routing and animation support you’ll need to do the following in your module definition:

 

var app = angular.module('customersApp', ['ngRoute', 'ngAnimate']);

 

You’ll also need to include the angular-route.js and angular-animate.js scripts in your main page as well.

I recently updated an application that uses animations to slide views into a page using the ngView directive and thought I’d walk through the upgrade process. It only took about 5 minutes to change things over to the new animation technique now in AngularJS 1.2+.


The Original Code

The ngView directive in the main shell page looked like the following in the original code. Note the inclusion of the ngAnimate directive:

 

<div class="container">
    <div data-ng-view="" id="ng-view" data-ng-animate="{enter: 'view-enter'}"></div>
</div>


I had the following styles in a CSS stylesheet to handle the slide-in and slide-out animations:

#ng-view {
  position:relative;
  min-height:500px;
}

/* Animations */
.view-enter, .view-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.view-enter {
  opacity:0;
  left:100px;
  width:100%;
  position:absolute;
}

.view-enter.view-enter-active {
  left:0;
  opacity:1;
}

.view-leave {
  position:absolute;
  left:0;
  width:100%;
  opacity:1;
}

.view-leave.view-leave-active {
  left:-100px;
  opacity:0;
}

 


The New Code

 

To upgrade the code to AngularJS 1.2+ I had to remove the ngAnimate directive (it’s been deprecated in 1.2+) and add a class instead. I like this approach because it’s a lot cleaner overall. Here’s what the ngView directive looks like in the upgraded application:

 

<div class="container">
    <div data-ng-view="" id="ng-view" class="slide-animation"></div>
</div>

 

The CSS was changed to the following (I made a few tweaks here and there as well):

 

#ng-view {
  position:relative;
}

/* Animations */
.slide-animation.ng-enter, .slide-animation.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

  position:absolute;
  top:0;
  left:0;
  right:0;
  min-height:1000px;
}

.slide-animation.ng-enter {
  opacity:0;
  left:100px;
}

.slide-animation.ng-enter.ng-enter-active {
  left:0;
  opacity:1;
}

.slide-animation.ng-leave {
  left:0;
  opacity:1;
}

.slide-animation.ng-leave.ng-leave-active {
  left:-100px;
  opacity:0;
}

 

Notice that the slide-animation class shown earlier on the ngView directive prefixes the various selectors for ng-enter and ng-leave:

Matias Niemelā (the main dev behind AngularJS animation functionality) has an excellent post on the subject if you’d like more detail on animations and how they can be used with various directives.


Check out my other posts on AngularJS

Published Sunday, August 18, 2013 2:07 PM by dwahlin

Comments

# re: AngularJS Animations in Version 1.2+

Monday, August 19, 2013 6:10 AM by Maximilian Eberl

Hi, Dan!

Thanks for the article.

Is a demo of Your animation available or some source zip?

Thank You and Greetings!

Max

# Interesting Finds: August 19, 2013

Monday, August 19, 2013 7:58 AM by Jason Haley

Interesting Finds: August 19, 2013

# The AngularJS Magazine – What’s New this Week?

Friday, August 23, 2013 7:57 PM by Dan Wahlin

&#160; Click to view the FlipBoard magazine &#160; AngularJS Magazine Updates for August 23rd Configuring

# The AngularJS Magazine – What’s New this Week?

Tuesday, September 3, 2013 10:10 AM by Dan Wahlin

&#160; Click to View &#160; AngularJS Magazine Updates for September 30th Custom Validations in AngularJS

# The AngularJS Magazine – What’s New this Week?

Tuesday, September 17, 2013 12:38 AM by Dan Wahlin

&#160; Click to View Here’s what’s new in the world of AngularJS. Check out the Flipboard magazine above