AngularJS Animations

In AngularJS, you can build animated transition with the help of CSS. The CSS transforms the HTML elements that give you an illusion of motion.

You must include the following things to make your application ready for animations:

AngularJS Animate library:

  • <script src=""></script>

Refer to the ngAnimate module in your application:

  • <body ng-app="ngAnimate">

# AngularJS Animation Example

Hide the DIV:

Test it Now

# What does ngAnimate do?

The ngAnimate module does not animate HTML elements itself. It only adds and removes some pre-defined classes to make animations when ngAnimate notice certain events, like hide or show of an HTML element.

Following is a list of directives in AngularJS who add/remove classes:

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