Angular Animation

The Angular team created the ngAnimate module to give our Angular apps hooks into providing CSS and JavaScript.

There are several ways to make animations in an Angular app:

• Using CSS3 Animations
• Using JavaScript animations
• Using CSS3 Transitions

In this chapter, we aim to discuss these three methods of animating and provide a solid understanding of how we can power our own custom animations.

Installation

As of 1.2.0, animations are no longer part of the core of Angular; they exist in their own module. In order to include animations in our Angular app, we need to install and reference this module in our app.

We can download it from code.angularjs.org and save it in a place that we can reference it from our HTML, like js/vendor/angular-animate.js.

We can also install it using Bower, which will place it in our usual Bower directory. For more information about Bower, see the Bower chapter.

$ bower install --save angular-animate

We’ll need to reference this library in our HTML after we reference Angular itself.

<script src="js/vendor/angular.js"></script>
<script src="js/vendor/angular-animate.js"></script>

Lastly, we’ll need to reference the ngAnimate module as a dependency in our app module:

angular.module('myApp', ['ngAnimate']);

Now we are ready to take on animations with AngularJS.

How It Works

The $animate service itself, by default, applies two CSS classes to the animated element for each animation event (see below).

The $animate service supports several built-in Angular directives that automatically support animation without the need for any extra configuration. It is also flexible enough to enable us to build our own animations for our directives.

All of the pre-existing directives that support animation do so through monitoring events provided on those directives. For instance, when a new ngView enters and brings new content into the browser, this event is called the enter event for ngView. When ngHide is ready to show an element, the remove event is fired.

The following is a list of directives and the events that each fires at different states. We will use these events to define how our animations will work in each state.

The $animate service attaches specific classes based upon the events that the directive emits. For structural animations (like enter, move and leave) the CSS classes that are applied are in the form of ng-[EVENT] and ng-[EVENT]-active.

For class-based animations (like ngClass) the animation classes are in the form [CLASS]-add, [CLASS]-add-active, [CLASS]-remove, [CLASS]-remove-active.

Finally, for ngShow and ngHide only the .ng-hide class is added or removed and its form is the same as for ngClass: .ng-hide-add, .ng-hide-add-active, .ng-hide-remove, and .ng-hide-remove-active.

Automatically Added Classes

The directives that fire the enter event receive a class of .ng-enter when the DOM is updated. Angular then adds the ng-enter-active class, which triggers the animation. ngAnimate automatically detects the CSS code to determine when the animation is complete.

When the event is done, Angular removes both classes from the DOM element, enabling us to define animatable properties to the DOM elements.

If the browser does not support CSS transitions or animations, then the animation will start and end immediately, and the DOM will end up at its final state with no CSS transitions or animation classes applied.

The same convention applies for all of the supported structural animation events: enter, leave and move. The class-based animation events have a slightly different form (as mentioned above).

Using CSS3 Transitions

Using CSS3 transitions is by far the easiest way to include animations in our app, and it works for all browsers except IE9 and earlier versions.

Browsers that do not support CSS3 transitions gracefully fall back to the non-animated version of the app.

To do any CSS animation, we need to make sure we add the classes we’ll be working with to the DOM element we’re interested in animating.

For instance, in the following demo, we’ll look at animating this element:

<div class="fade-in"></div>

CSS3 transitions are fully class-based, which means that as long as we have classes that define the animation in our HTML, the animation will be animated in the browser.

In order for us to achieve animations with classes, we need to follow the Angular CSS naming conventions to define our CSS transitions.

CSS transitions are effects that let an element gradually change from one style to another style. To define an animation, we must specify the property we want to add an animation to as well as specify the duration of effect.

For instance, this code adds a transition effect on all of the properties on DOM elements with the .fade-in class for a two-second duration.

.fade-in {
  transition: 2s linear all;
  -webkit-transition: 2s linear all;
}

With this transition and timing set, we can define properties on different states of the DOM element.

.fade-in:hover {
  width: 300px;
  height: 300px;
}

With ngAnimate, Angular starts our directive animations by adding two classes to each animation event: the initial ng-[EVENT] class and, shortly thereafter, the ng-[EVENT]-active class.

To automatically allow the DOM elements from above to transition with Angular animation, we modify the initial .fade-in example from above to include the initial state class:

.fade-in.ng-enter {
  opacity: 0;
}
.fade-in.ng-enter.ng-enter-active {
  opacity: 1;
}

.fade-in.ng-enter {
  transition: 2s linear all;
  -webkit-transition: 2s linear all;
}

We can also place the transition properties on the base CSS class (the “.fade-in” instead of specifying it for each animation that will take place.

.fade-in {
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
}
.fade-in.ng-enter {
  opacity: 0;
} 
.fade-in.ng-enter.ng-enter-active {
  opacity: 1;
} 
.fade-in.ng-leave {
  opacity: 1;
} 
.fade-in.ng-leave.ng-leave-active {
  opacity: 0;
} 

Using CSS3 Animations

CSS3 animations are more extensive and more complex than CSS3 transitions. They are supported by all major browsers except IE9 and earlier versions of IE. With CSS3 animations, we use the same initial class ng-[EVENT], but we don’t need to define animation states in the ng-[EVENT]-active state, because our CSS rules will handle the rest of the block.

We create the animation in the @keyframes rule. Within the CSS element where we define the @keyframes rule, we define the CSS styles that we want to manipulate.

When we want to animate the DOM element, we use the animation: property to bind the @keyframe CSS property, which applies the animation to the CSS element.

To create our @keyframes rule, we need to give our keyframe a name and set the time periods of the where the properties should be throughout the animation.

@keyframes firstAnimation {
  0% {
    color: yellow;
  }
  100% {
    color: black;
  }
}
/* For Chrome and Safari */
@-webkit-keyframes firstAnimation {
  /* from is equivalent to 0% */
  from {
    color: yellow;
  }
  /* from is equivalent to 100% */
  to {
    color: black;
  }
}