AngularJS Animation

Animation Support in AngularJS

  • Include ngAnimate module as a dependency
  • < script src="/../angularjs/1.3.15/angular-animate.js" > < / script >
  • Angular provides animation hooks for common directives
    • ngRepeat, ngSwitch, ngView
    • These animation hooks are set in place to trigger CSS-based animations during the life cycle of various directives
  • ngAnimate module provides built-in styles
    • < li class=”... ng-enter ng-enter-active” > item < /li >
    • < li class=”... ng-leave ng-leave-active” > item < /li >
  • When an animation occurs, two sets of CSS classes are added to the element: 
    • A "starting" class that represents the style at the beginning of the animation. 
    • An "active" class that represents the style at the end of the animation 
  • The name of the starting class is the name of the event that is fired (like enter, move or leave) prefixed with ng- 
    • So an enter event will result in adding the ng-enter class.

You must have an active subscription to download PDF,Lab Zip and Recordings of this course topic.Please click the "Subscribe" button or the "Login" button if you already have an account.