Do web animations have to be hard? NO! This presentation will teach you how to build several types of animations using the AngularJS Javascript framework, CSS, and the GreenSock Animation Platform. In addition, you will get to use these animations in real-world scenarios.

1. 1
“Advanced”
Animations

2. 2

3. 3

4. 4
events
&
convention

5. 5
enter
leave
move
addClass
removeClass

6. 6
[class][event][state]
.repeat-item.ng-leave.ng-leave-active

7. 7
/* you can also define the transition style
on the base class (.repeat-item) */
.repeat-item.ng-enter,
.repeat-item.ng-leave {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
}
.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
opacity:1;
}

8. 8
/* starting animations */
.my-special-animation.ng-enter {
-webkit-animation:0.5s red-to-blue;
animation:0.5s red-to-blue;
}
@keyframes red-to-blue {
from { background:red; }
to { background:blue; }
}
@-webkit-keyframes red-to-blue {
from { background:red; }
to { background:blue; }
}

9. 9
//remember to put the period!
myApp.animation('.fade', function() {
return {
//call done when the animation is over
enter : function(element, done) { },
//leave and move are the same as enter
leave : function(element, done) { },
move : function(element, done) { },
//this is called BEFORE the class is added
beforeAddClass : function(element, className, done) { },
//this is called AFTER the class is added
addClass : function(element, className, done) { },
//this is called BEFORE the class is removed
beforeRemoveClass : function(element, className, done) { },
//this is called AFTER the class is removed
removeClass : function(element, className, done) { },
};
});

10. 10
Event Starting CSS Class Ending CSS class
Directives
that fire it
enter .ng-enter .ng-enter-active ngRepeat,
ngInclude, ngIf,
ngView
leave .ng-leave .ng-leave-active ngRepeat,
ngInclude, ngIf,
ngView
move .ng-move .ng-move-active ngRepeat

11. 11
Action Starting CSS Class Ending CSS class
Directives that
fire it
hide an element .ng-hide-add .ng-hide-add-active ngShow, ngHide
show an element .ng-hide-remove .ng-hide-remove-active ngShow, ngHide
adding a class to an
element
.CLASS-add .CLASS-add-active ngClass and
class="{{expressio
n}}"
removing a class from an
element
.CLASS-remove .CLASS-remove-active ngClass and
class="{{expressio
n}}"

12. 12
Event Function Description
enter $animate.enter(element, parent,
after, callback);
Appends the element object after
the after node or within the
parent node and then runs the
enter animation on the element
leave $animate.leave(element,
callback);
Runs the leave animation and
then removes the element from
the DOM
move $animate.move(element, parent,
after, callback);
Moves the element node either
after the after node or inside of
the parent node and then runs the
move animation on the element
addClass $animate.addClass(element,
className, callback);
Runs the addClass animation
based on the className value
and then adds the class to the
element
removeClass $animate.removeClass(element,
className, callback);
Runs the removeClass animation
based on the className value
and then removes the class from
the element

13. 13
http://bit.ly/ng-example-01

14. 14
http://bit.ly/ng-example-02

15. 15
http://bit.ly/ng-example-03