Curriculum
Course: AngularJS
Login

Curriculum

AngularJS

AngularJS Tutorial

0/65
Text lesson

What Does ngAnimate Do?

The ngAnimate module manages class additions and removals by assigning predefined classes during events like showing or hiding elements, enabling animations. AngularJS directives that trigger these class changes include:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

The ng-show and ng-hide directives toggle the ng-hide class. Other directives apply ng-enter when elements enter the DOM, ng-leave when removed, and ng-move when an element’s position changes, like with ng-repeat. During animations, elements have specific class values that are removed after completion. For example, the ng-hide directive applies these class values:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (if the element is being hidden)
  • ng-hide-remove (if the element is being shown)
  • ng-hide-add-active (if the element is being hidden)
  • ng-hide-remove-active (if the element is being shown)

Animations Using CSS

We can utilize CSS transitions or CSS animations to animate HTML elements, and this tutorial will cover both methods.