« Previous Next »

AngularJS Animations

AngularJS provides animated transitions, with help from CSS.

What is an Animation?

An animation is when the transformation of an HTML element gives you an illusion of motion.

Output :

What do I Need?

To make your applications ready for animations, you must include the AngularJS Animate library:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js" ></script>


Then you must refer to the ngAnimate module in your application:


<body ng-app="ngAnimate">


Or if your application has a name, add ngAnimate as a dependency in your application module:

Output :


What Does ngAnimate Do?

The ngAnimate module adds and removes classes.

Note: The ngAnimate module does not animate your HTML elements by itself. Instead, when it detects certain events (like show/hide), it adds special class names to those elements which you can then use to create CSS-based animations.

AngularJS Directives That Trigger Animations:

  • 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.

The other directives use:

  • ng-enter when elements enter the DOM
  • ng-leave when elements are removed from the DOM

The ng-repeat directive also adds ng-move when elements are reordered.

Animation Class Flow:

For example, when using ng-hide, Angular may apply the following classes:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (if hiding the element)
  • ng-hide-remove (if showing the element)
  • ng-hide-add-active
  • ng-hide-remove-active

Animations Using CSS

You can use CSS Transitions or CSS Animations to animate these class changes.

To learn more:

About CSS Transitions:

CSS transitions allow you to change property values smoothly from one value to another over a set duration.

Output :


CSS Animations

CSS Animations allows you to change CSS property values smoothly, from one value to another, over a given duration:

Output :


💻 AIT AngularJS Animated To-Do List Project

This project is developed as part of the AngularJS learning series by AIT – Academy of Information Technology. It showcases the use of real-time task management with beautiful animations using AngularJS, ng-animate, and dynamic styling. Students can use this daily for organizing their tasks while learning important frontend concepts.

A great beginner-to-intermediate level example combining HTML, CSS, AngularJS, animations, and logic handling for educational purposes.

Output :
« Previous Next »