AngularJS 1.2 Animation Changes

AngularJS 1.2

All code in the unstable branch will make way into the stable branch

AngularJS 1.3 will be the new development branch

Lots of bug fixes + concrete animations API

How to use them in 1.2

Include angular-animate.js and ngAnimate into your module.

var ngModule = angular.module('myApp', ['ngAnimate']);

No ng-animate attribute required

<div ng-include="exp" class="my-animation">...<div>

CSS Transition Example

Two CSS classes required.

.my-animation.ng-enter {
  transition:0.5s linear all;
  background:red;
}
.my-animation.ng-enter.ng-enter-active {
  background:blue;
}

CSS3 Animations

Only CSS class required.

.my-animation.ng-enter {
  animation:0.5s my_animation;
}
@keyframes my_animation {
  from { background:blue; }
  to { background:red; }
}

JavaScript Animations

Use the class name as the name of the animation

ngModule.animation('.my-animation', function(inject) {
  return {
    enter : function(element, done) {
      animate(element, done);
      return function onEnd(cancelled) {
        //stop the animation here if cancelled or
        //when the animation is over
      };
    },
    addClass : function(element, className, done) { ... },
    removeClass : function(element, className, done) { ... }
  };
});

ngClass now supports animations

ngClass triggers the add and remove actions.

<div ng-class="val">...<div>

The CSS code is similar

.my-class-add, .my-class-remove {
  transition:0.5s linear all;
}
.my-class-add { }
.my-class-add.my-class-add-active { }
.my-class-remove { }
.my-class-remove.my-class-remove-active { }

$animator is now $animate

$animate is the core animation service for triggering animations.

ngModule.directive('my-directive', function($animate) {
  return function($scope, element, attrs) {
    $animate.enter(element, parent, onDone);
    $animate.leave(element, onDone);
    $animate.move(element, parent, after, onDone);
    $animate.addClass(element, className, onDone);
    $animate.removeClass(element, className, onDone);
  };
});

Other changes

$animate.addClass and $animate.removeClass

Callbacks work together with each $animate action.

ng-hide and ng-show add and remove the .ng-hide class value to show and hide an element

What else?

Animations can be changed by swapping a Stylesheets.

Makes it easy for plug and play functionality from other libraries

Allows for multiple animations to occur at the same time

Thank you!

Thank you for making this possible

Please use and experiment with animations so that we can make this tool better

@yearofmoo

Feel free to contact me via matias@yearofmoo.com