Improve this doc

In this final step, we will enhance our phonecat web application by attaching CSS and JavaScript animations on top of the template code we created before.

Now that everything is set in place for a fully functional web application, we can attach CSS and JavaScript animations to common directives that are used to render our application. AngularJS comes bundled with an additional JavaScript file called angular-animate.js which, when included into the website and set as a dependency with the application module, will enable animations throughout the application.

Common ng directives automatically trigger hooks for animations to tap into. When an animation is found then the animation will run in between the standard DOM operation that is being issued on the element at the given time (e.g. inserting and removing nodes on ngRepeat or adding and removing classes on ngClass).

The most important changes are listed below. You can see the full diff on GitHub:

How Animations work with ngAnimate

To get an idea of how animations work with AngularJS, please read the AngularJS Animation Guide first.

Template

The changes required within the HTML template code is to link the asset files which define the animations as well as the angular-animate.js file. The animation module, known as ngAnimate, is defined within angular-animate.js and contains the code necessary to make your application become animation aware.

Here's what needs to changed in the index file:

app/index.html. 

  1. ...
  2.   <!-- jQuery is used for JavaScript animations (include this before angular.js) -->
  3.   <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  4.  
  5.   <!-- required module to enable animation support in AngularJS -->
  6.   <script src="lib/angular/angular-animate.js"></script>
  7.  
  8.   <!-- for JavaScript Animations -->
  9.   <script src="js/animations.js"></script>
  10.  
  11.   <!-- for CSS Transitions and/or Keyframe Animations -->
  12.   <link rel="stylesheet" href="css/animations.css">
  13. ...

Animations can now be created within the CSS code (animations.css) as well as the JavaScript code (animations.js). But before we start, let's create a new module which uses the ngAnimate module as a dependency just like we did before with ngResource.

Module & Animations

app/js/animations.js. 

  1. angular.module('phonecatAnimations', ['ngAnimate']).
  2.   // ...
  3.   // this module will later be used to define animations
  4.   // ...

And now let's attach this module to our application module…

app/js/app.js. 

  1. // ...
  2. angular.module('phonecat', [
  3.   'ngRoute',
  4.  
  5.   'phonecatAnimations',
  6.   'phonecatControllers',
  7.   'phonecatFilters',
  8.   'phonecatServices',
  9. ]).
  10. // ...

Now, the phonecat module is animation aware. Let's make some animations!

Animating ngRepeat with CSS Transition Animations

We'll start off by adding CSS transition animations to our ngRepeat directive present on the phone-list.html page. First let's add an extra CSS class to our repeated element so that we can hook into it with our CSS animation code.

app/partials/phone-list.html. 

  1. <!--
  2.   Let's change the repeater HTML to include a new CSS class
  3.   which we will later use for animations:
  4. -->
  5. <ul class="phones">
  6.   <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"
  7.       class="thumbnail phone-listing">
  8.     <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
  9.     <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
  10.     <p>{{phone.snippet}}</p>
  11.   </li>
  12. </ul>
  13.  

Notice how we added the phone-listing CSS class? This is all we need in our HTML code to get animations working.

Now for the actual CSS transition animation code:

app/css/animations.css 

  1. .phone-listing.ng-enter,
  2. .phone-listing.ng-leave,
  3. .phone-listing.ng-move {
  4.   -webkit-transition: 0.5s linear all;
  5.   -moz-transition: 0.5s linear all;
  6.   -o-transition: 0.5s linear all;
  7.   transition: 0.5s linear all;
  8. }
  9.  
  10. .phone-listing.ng-enter,
  11. .phone-listing.ng-move {
  12.   opacity: 0;
  13.   height: 0;
  14.   overflow: hidden;
  15. }
  16.  
  17. .phone-listing.ng-move.ng-move-active,
  18. .phone-listing.ng-enter.ng-enter-active {
  19.   opacity: 1;
  20.   height: 120px;
  21. }
  22.  
  23. .phone-listing.ng-leave {
  24.   opacity: 1;
  25.   overflow: hidden;
  26. }
  27.  
  28. .phone-listing.ng-leave.ng-leave-active {
  29.   opacity: 0;
  30.   height: 0;
  31.   padding-top: 0;
  32.   padding-bottom: 0;
  33. }

As you can see our phone-listing CSS class is combined together with the animation hooks that occur when items are inserted info and removed from the list:

  • The ng-enter class is applied to the element when a new phone is added to the list and rendered on the page.
  • The ng-move class is applied when items are moved around in the list.
  • The ng-leave class is applied when they're removed from the list.

The phone listing items are added and removed depending on the data passed to the ng-repeat attribute. For example, if the filter data changes the items will be animated in and out of the repeat list.

Something important to note is that when an animation occurs, two sets of CSS classes are added to the element:

  • a "starting" class that represents the style at the beginning of the animation
  • an "active" class that represents the style at the end of the animation

The name of the starting class is the name of event that is fired (like enter, move or leave) prefixed with ng-. So an enter event will result in a class called ng-enter.

The active class name is the same as the starting class's but with an -active suffix. This two-class CSS naming convention allows the developer to craft an animation, beginning to end.

In our example above, elements expand from a height of 0 to 120 pixels when items are added or moved, around and collapsing the items before removing them from the list. There's also a nice fade-in and fade-out effect that also occurs at the same time. All of this is handled by the CSS transition declarations at the top of the example code above.

Although most modern browsers have good support for CSS transitions and CSS animations, IE9 and earlier do not. If you want animations that are backwards-compatible with older browsers, consider using JavaScript-based animations, which are described in detail below.

Animating ngView with CSS Keyframe Animations

Next let's add an animation for transitions between route changes in ngView.

To start, let's add a new CSS class to our HTML like we did in the example above. This time, instead of the ng-repeat element, let's add it to the element containing the ng-view directive. In order to do this, we'll have to make some small changes to the HTML code so that we can have more control over our animations between view changes.

app/index.html. 

  1. <div class="view-container">
  2.   <div ng-view class="view-frame"></div>
  3. </div>

With this change, the ng-view directive is nested inside a parent element with a view-container CSS class. This class adds a position: relative style so that the positioning of the ng-view is relative to this parent as it animates transitions.

With this in place, let's add the CSS for this transition animation to our animations.css file:

app/css/animations.css. 

  1. .view-container {
  2.   position: relative;
  3. }
  4.  
  5. .view-frame.ng-enter, .view-frame.ng-leave {
  6.   background: white;
  7.   position: absolute;
  8.   top: 0;
  9.   left: 0;
  10.   right: 0;
  11. }
  12.  
  13. .view-frame.ng-enter {
  14.   -webkit-animation: 0.5s fade-in;
  15.   -moz-animation: 0.5s fade-in;
  16.   -o-animation: 0.5s fade-in;
  17.   animation: 0.5s fade-in;
  18.   z-index: 100;
  19. }
  20.  
  21. .view-frame.ng-leave {
  22.   -webkit-animation: 0.5s fade-out;
  23.   -moz-animation: 0.5s fade-out;
  24.   -o-animation: 0.5s fade-out;
  25.   animation: 0.5s fade-out;
  26.   z-index:99;
  27. }
  28.  
  29. @keyframes fade-in {
  30.   from { opacity: 0; }
  31.   to { opacity: 1; }
  32. }
  33. @-moz-keyframes fade-in {
  34.   from { opacity: 0; }
  35.   to { opacity: 1; }
  36. }
  37. @-webkit-keyframes fade-in {
  38.   from { opacity: 0; }
  39.   to { opacity: 1; }
  40. }
  41.  
  42. @keyframes fade-out {
  43.   from { opacity: 1; }
  44.   to { opacity: 0; }
  45. }
  46. @-moz-keyframes fade-out {
  47.   from { opacity: 1; }
  48.   to { opacity: 0; }
  49. }
  50. @-webkit-keyframes fade-out {
  51.   from { opacity: 1; }
  52.   to { opacity: 0; }
  53. }
  54.  
  55. /* don't forget about the vendor-prefixes! */

Nothing crazy here! Just a simple fade in and fade out effect between pages. The only out of the ordinary thing here is that we're using absolute positioning to position the next page (identified via ng-enter) on top of the previous page (the one that has the ng-leave class) while performing a cross fade animation in between. So as the previous page is just about to be removed, it fades out while the new page fades in right on top of it. Once the leave animation is over then element is removed and once the enter animation is complete then the ng-enter and ng-enter-active CSS classes are removed from the element rendering it to be position itself with its default CSS code (so no more absolute positioning once the animation is over). This works fluidly so that pages flow naturally between route changes without anything jumping around.

The CSS classes applied (the start and end classes) are much the same as with ng-repeat. Each time a new page is loaded the ng-view directive will create a copy of itself, download the template and append the contents. This ensures that all views are contained within a single HTML element which allows for easy animation control.

For more on CSS animations, see the Web Platform documentation.

Animating ngClass with JavaScript

Let's add another animation to our application. Switching to our phone-detail.html page, we see that we have a nice thumbnail swapper. By clicking on the thumbnails listed on the page, the profile phone image changes. But how can we change this around to add animations?

Lets think about it first, basically when you click on a thumbnail image, you're changing the state of the profile image to reflect the newly selected thumbnail image. The best way to specify state changes within HTML is to use classes. Much like before, how we used a CSS class to specify an animation, this time the animation will occur whenever the CSS class itself changes.

Whenever a new phone thumbnail is selected, the state changes and the .active CSS class is added to the matching profile image and the animation plays.

Let's get started and tweak our HTML code on the phone-detail.html page first:

app/partials/phone-detail.html. 

  1. <!-- We're only changing the top of the file -->
  2. <div class="phone-images">
  3.   <img ng-src="{{img}}"
  4.        class="phone"
  5.        ng-repeat="img in phone.images"
  6.        ng-class="{active:mainImageUrl==img}">
  7. </div>
  8.  
  9. <h1>{{phone.name}}</h1>
  10.  
  11. <p>{{phone.description}}</p>
  12.  
  13. <ul class="phone-thumbs">
  14.   <li ng-repeat="img in phone.images">
  15.     <img ng-src="{{img}}" ng-mouseenter="setImage(img)">
  16.   </li>
  17. </ul>

Just like with the thumbnails, we're using a repeater to display all the profile images as a list, however we're not animating any repeat-related animations. Instead, we're keeping our eye on the ng-class directive since whenever the active class is true then it will be applied to the element and will render as visible. Otherwise, the profile image is hidden. In our case, there is always one element that has the active class, and, therefore, there will always be one phone profile image visible on screen at all times.

When the active class is added to the element, the active-add and the active-add-active classes are added just before to signal AngularJS to fire off an animation. When removed, the active-remove and the active-remove-active classes are applied to the element which in turn trigger another animation.

You may be thinking that we're just going to create another CSS-enabled animation. Although we could do that, let's take the opportunity to learn how to create JavaScript-enabled animations with the animation() module method.

app/js/animations.js. 

  1. angular.module('phonecatAnimations', ['ngAnimate'])
  2.  
  3.   .animation('.phone', function() {
  4.     return {
  5.       addClass : function(element, className, done) {
  6.         if(className != 'active') {
  7.           return;
  8.         }
  9.         element.css({
  10.           position: 'absolute',
  11.           top: 500,
  12.           left: 0,
  13.           display: 'block'
  14.         });
  15.         jQuery(element).animate({
  16.           top: 0
  17.         }, done);
  18.  
  19.         return function(cancel) {
  20.           if(cancel) element.stop();
  21.         };
  22.       },
  23.       removeClass : function(element, className, done) {
  24.         if(className != 'active') return;
  25.         element.css({
  26.           position: 'absolute',
  27.           left: 0,
  28.           top: 0
  29.         });
  30.         jQuery(element).animate({
  31.           top: -500
  32.         }, done);
  33.  
  34.         return function(cancel) {
  35.           if(cancel) element.stop();
  36.         };
  37.       }
  38.     };
  39.   });

Note that we're using jQuery to implement the animation. jQuery isn't required to do JavaScript animations with AngularJS, but we're going to use it because writing your own JavaScript animation library is beyond the scope of this tutorial. For more on jQuery.animate, see the jQuery documentation.

Important: Be sure to use jQuery version 1.10.x. AngularJS does not yet support jQuery 2.x.

The addClass and removeClass callback functions are called whenever an a class is added or removed on the element that contains the class we registered, which is in this case .phone. When the .active class is added to the element (via the ng-class directive) the addClass JavaScript callback will be fired with element passed in as a parameter to that callback. The last parameter passed in is the done callback function. The purpose of done is so you can let Angular know when the JavaScript animation has ended by calling it.

The removeClass callback works the same way, but instead gets triggered when a class is removed from the element.

Within your JavaScript callback, you create the animation by manipulating the DOM. In the code above, that's what the element.css() and the element.animate() are doing. The callback positions the next element with an offset of 500 pixels and animates both the previous and the new items together by shifting each item up 500 pixels. This results in a conveyor-belt like animation. After the animate function does its business, it calls done.

Notice that addClass and removeClass each return a function. This is an optional function that's called when the animation is cancelled (when another animation takes place on the same element) as well as when the animation has completed. A boolean parameter is passed into the function which lets the developer know if the animation was cancelled or not. This function can be used to do any cleanup necessary for when the animation finishes.

Summary

There you have it! We have created a web app in a relatively short amount of time. In the closing notes we'll cover where to go from here.