ngAnimate crash course

ngAnimate crash course

• 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 canalso 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 putthe 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 CSSClass 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 CSSClass 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