ng-animate

ng-animate

•  Animations, driven by CSS 3
• Access to the Angular event loop
• Plays nice with Angular directives

Step 0: Setup Angular

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
  
<script>
    angular.module('animateApp',['ngAnimate'])
      .controller("MainController", function($scope){
    
    });
</script>

There are two important changes

1. Notice that we're including an extra script tag. Animate is a "module".
    
2. Notice we're "injecting" ngAnimate when we create animateApp

Step 1: Use a directive

When ng-animate is included in your angular app, some directives automatically create special classes, used to drive the animations.

For example, ng-if will now use the classes:

becoming hidden: ng-leave ng-leave-active ng-animate

becoming shown: ng-enter ng-enter-active ng-animate

Step 2: Write the CSS

<button ng-init="hidden = false" ng-click="hidden = true" ng-if="hidden">

.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

.ng-enter.ng-enter-active {
  opacity:1;
}

.ng-leave {
  transition:0.5s linear all;
  opacity:1;
}

.ng-leave.ng-leave-active {
  opacity:0;
}

.ng-hide {
  transition:0.5s linear all;
  opacity:0;
}

Step 3: Get Specific

.fast-fade {
  transition: 0.5s linear all;
}

.slow-fade {
  transition: 3s linear all;
}

.ng-enter {
  opacity: 0;
}

.ng-enter.ng-enter-active {
  opacity: 1;
}

.ng-leave {
  opacity: 1;
}

.ng-leave.ng-leave-active {
  opacity: 0;
}

.ng-hide {
  opacity: 0;
}

Step 3: Get Specific

.big {
	font-size: 50px;
}

.small {
	font-size: 40px;
}

.ng-animate.big-add, .ng-animate.small-add {
	transition: 1s linear font-size;
}

<div ng-class="{big: toggleBoolean, small: !toggleBoolean}">

Recap

1. Add the animate code with a <script> tag
2. Inject ngAnimate to your app
3. Use one of the Animation supported directives on some HTML
4. Write plain old CSS3 transitions tied to the special ng-animate classes (ng-enter, ng-leave, etc.)

Questions?