AngularJS 1.2 Animation Changes – By Matias Niemelä – AngularJS 1.2

View Github Repository Open presentation in a new window

yearofmoo-articles

See all presentation from yearofmoo-articles

AngularJS 1.2 Animation Changes – By Matias Niemelä – AngularJS 1.2

0 2

1-2-animations-slides

On Github yearofmoo-articles / 1-2-animations-slides

AngularJS 1.2 Animation Changes

By Matias Niemelä

@yearofmoo

http://www.yearofmoo.com

Six major AngularJS articles.

Great resource to learn about AngularJS and ngAnimate.

Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

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

Changes to ngAnimate

Template code no longer uses the ng-animate="" attribute to set animations.

Both CSS and JS animations pay attention to the CSS classes present on an element to figure out what to animate.

Conditional animations are established by using ng-class="" to toggle animation state.

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