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.
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
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.