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

Animation in AngularJS 1.2

  • 64,443

More from G. Kay Lee