Animation

in

AngularJS

1.2

FORGET ALL YOU KNEW

FORGET ALL YOU KNEW

ABOUT NGANIMATE

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

<script src="angular-animate.min.js"></script>

<script>

    angular.module('yo', [

        'ngAnimate'

    ]);

</script>

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

Directives with

Native ngAnimate Support

#1


ngRepeat

+

CSS3 Transition


Directives with

Native ngAnimate Support

#2


ngView

+

CSS3 Keyframes



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

Directives with

Native ngAnimate Support

#3


ngClass

+

Animate.css


Custom Directives with

Custom Events

#4


$animate

for

Custom Directive


Need more information?

http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
Brought to you by
with great helps from

Animation in AngularJS 1.2

By G. Kay Lee

Navigation instructions

Press the space key or click the arrows to the right

Animation in AngularJS 1.2

  • 47,672
Loading comments...

More from G. Kay Lee