The need for AngularJS animation

AngularJS calls itself a superheroic JavaScript Model View Whatever (MVW) framework—no kidding; this is on the main page. AngularJS is an extensive framework that helps frontend developers on many different aspects. One of these aspects is how to animate all the stuff that magically appears on the browser when we manipulate the scope variables.

Check out the website of AngularJS at https://angularjs.org/ for more information on this framework's awesomeness.

Tip

The AngularJS animation module ngAnimate is separate from the AngularJS core module, so it's necessary to include it as a dependency of your application.

The framework is already modular as of Version 1.3 and has the intention to be even more modularized with future releases. The ngAnimate module lets you animate the common directives built in AngularJS, such as ngRepeat, ngShow, ngHide, ngIf, ngInclude, ngSwitch, and ngView.

Including the ngAnimate module in the framework enables hooks that trigger animations that you want to be displayed during the normal life cycle of native directives and custom directives.

We just need to create the animation declarations that will be triggered by these hooks using CSS3 transitions, CSS3 keyframe animations, or even JavaScript animations with callback functions. We will learn how to create these animations in Chapter 3, Creating Our First Animation in AngularJS.

AngularJS follows the convention of the configuration design paradigm, so animations can be placed using plain CSS3 animations just by following the naming conventions that will be listed later.

Animations on AngularJS are completely based on CSS classes. Animation hooks enabled by the ngAnimate module are provided by classes that are added or removed from elements in specific events. The events in which we can hook animations are the enter, move, and leave events of the DOM element and the addition or removal of a class from the element. This is a simple but powerful unique concept, as animations should be used on these events. This approach makes animations on AngularJS very intuitive without much effort or using a lot of code.

This AngularJS approach is different from jQuery animate, as we declare animations based on classes instead of imperatively adding an animation using JavaScript wherever a DOM manipulation is expected to occur. As most of these DOM manipulations are implicit in AngularJS, the animations' approach is mainly declarative and the animation hook is not intrusive.

Animations are useful for users when they grab the user's attention, catching the users' eye for specific elements, and making their lives easier. Motion builds meaning about relationships between elements, functionality, and intention of the system; it enhances the user cognition.

Animations can create responsiveness when a button element is touched and clicked on and a new element is added to the view from the origin point of the button.

Animations can tell a user when an element is moved from point A to point B of the view, guiding the user's attention. They can improve conversion; in this case, we should always use split tests.

It is easily possible to implement all the cases that I described previously using the events hooks that ngAnimate provides to us.

Google Material Design is a great resource that tells you how to apply animations to a web app. Check out http://www.google.com/design/ for more information.