Animation

in

AngularJS

1.2 FORGET ALL YOU KNEW

ABOUT NGANIMATE

http://threeandahalfstars.wordpress.com/2012/05/22/movie-review-men-in-black-3-2

Here's a quick sum up of what happened

ng-animate="demo"

.demo-enter

⇒⇒

HTML

JavaScript

CSS

CSS-Defined Animations Before 1.2

class="demo"

.demo.ng-enter

⇒⇒

CSS-Defined Animations After 1.2

Quick Migration Tips

#0

Before anything else...

Include the

ngAnimate Module

angular.module('yo', [

'ngAnimate'

]);

</script>

Yep, it's no longer part of the Angular core

Directives with

Native ngAnimate Support

#1

ngRepeat

CSS3 Transition

Demo

http://plnkr.co/edit/SZljRItnL986V821M7Ck

Directives with

Native ngAnimate Support

#2

ngView

CSS3 Keyframes

Demo

http://plnkr.co/edit/bY70b3f3PpegDtpTWiKc

(Notice how it's being cloned like ngRepeat post-1.2)

Directives with

Native ngAnimate Support

#3

ngClass

Animate.css

Demo

http://plnkr.co/edit/rynCEiaf9GfrWSH0V7fR

Custom Directives with

Custom Events

#4

$animate

for

Custom Directive

Demo

http://plnkr.co/edit/is0Icl9XsVkdQ3HTAJHZ

Need more information?

http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

Brought to you by

@gsklee

with great helps from

@yearofmoo