Book Image

Learning AngularJS Animations

By : Richard Keller
Book Image

Learning AngularJS Animations

By: Richard Keller

Overview of this book

Table of Contents (15 chapters)
Learning AngularJS Animations
About the Author
About the Reviewers

Animating the enter and leave events

The methods used to trigger the enter and leave animation events from the $animate service are $animate.enter and $animate.leave. They are the same animation events triggered by the ngIf, ngInclude, ngView, ngSwitch, ngRepeat, and ngMessage directives when an element is entered or removed from DOM.

The $animate.enter method adds the element sibling to the afterElement node or appends to the parentElement parameter and then runs the enter animation. After the animation is finished, the returned promise is resolved.

The method signature is as follows:

$animate.enter(element, parentElement, afterElement) 

The enter method follows these steps:

  1. $animate.enter(element, parentElement, afterElement) is called by the directive.

  2. The element is inserted in parentElement or sibling to afterElement if the parentElement is not defined.

  3. $animate waits for the next digest to start the animation.

  4. If there is any JavaScript animation defined for the element, the $animate service...