Intro to animations

angularjs was originally created as a framework to handle enterprise CRUD applications. With the introduction of the new animations API, angularjs has broadened the possibilities to offer something for designers and developers alike.

The most powerful aspect of angularjs is directives, and angularjs animations are essentially class-based directives that have the power to harness complex animations with the addition of a single class to your markup.


How angularjs handles animations

angularjs animations can be distilled down to five events and a class-based naming convention. Once you’ve grasped the events at play and the naming convention, angularjs animations fade into the background and the animations themselves take center stage.

There are three types of animations that you can create with angularjs: CSS transitions, CSS animations, and JavaScript animations. Each type of animation is well suited for varying contexts, and we’ll explore each of them later in the chapter.

angularjs doesn’t actually do any of the animations themselves, but simply provides the hooks for you to apply your own animations as you see fit. These hooks come in the form of events, and there are only five of them.

The five animation events are enter, leave, move, addClass, and removeClass (see table 6.1).

The angularjs animation furious five




enter $animate.enter(element, parent, after, callback); Appends the element object after the after node or within the parent node and then runs the enter animation on the element
leave $animate.leave(element, callback); Runs the leave animation and then removes the element from the DOM
move $animate.move(element, parent, after, callback); Moves the element node either after the after node or inside of the v node and then runs the move animation on the element
addClass $animate.addClass(element, className, callback); Runs the addClass animation based on the className value and then adds the class to the element
removeClass $animate.removeClass(element, className, callback); Runs the removeClass animation based on the className value and then removes the class from the element

The enter and leave events are fired when a DOM element is added or removed from the DOM tree, respectively. The move event is fired when a DOM element changes position within the DOM tree. Last but not least, the addClass and removeClass events are fired when a class is added to or removed from an element, respectively.

 The animation-naming convention

angularjs animations are entirely class-based, which is a design decision that makes integration with third-party libraries easier. Even JavaScript animations follow a class-based naming convention for consistency.

The animation-naming convention follows a [class]-[event]-[state] pattern, as shown in figure 6.1. This figure indicates that we’re dealing with a mute class that’s being added and removed, as seen by .mute-add and .mute-remove. The animation defaults to the starting state and then progresses to the active state, as in “the class has been actively applied.” The starting state is .mute-add, and .mute-add-active is the active or completed state.

  The animation-naming convention applied to directives

If your animations are defined within CSS and the events are triggered by an angularjs directive such as ng-if or ng-repeat, then the class name will be prefixed with an ng, as in ng-enter and ng-leave.