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

Creating staggering animations for other native directives

Alright, now we know how to create the staggering effect using the ngRepeat and ngIf directives in the enter and leave animation events; but, how to create staggering effects for other directives?

First, we need to understand how staggering happens. Angular enqueues the animations for elements with the same parent element, the same animation event, and the same CSS classes, and the animations should be triggered in less than 10 ms of each animation to be staggered. Otherwise, they will be considered as separated animations that should not be queued in the same sequence, and this doesn't mean that the delay should be less than 10 ms.

You might think that this happens only when we use ngRepeat, but it's not true. To prove it might apply for other directives too, let's create an ngClass staggering animation sample with the preceding rule in mind.

It's hard to figure out how to apply different staggering animations if we have all these...