AngularJS: Maintaining Web Applications

Lesson 3: AngularJS Animations

In this Lesson, we will cover the following recipes:

• Creating a simple fade in/out animation
• Replicating jQuery's slideUp() and slideDown() methods
• Creating enter animations with ngIf
• Creating leave and concurrent animations with ngView
• Creating move animations with ngRepeat
• Creating addClass animations with ngShow
• Creating removeClass animations with ngClass
• Staggering batched animations

Introduction

AngularJS incorporates its animation infrastructure as a separate module, ngAnimate. With this, you are able to tackle animating your application in several different ways, which are as follows:

• CSS3 transitions
• CSS3 animations
• JavaScript animations

Using any one of these three, you are able to fully animate your application in an ...