AngularJS Animations

With the help of CSS, AngularJS provides animation transitions.

What is animation?

Animation is the transformation of HTML elements that gives you the illusion of motion.

When the DIV element gets

Check the checkbox to hide the DIV:

<body ng-app="ngAnimate">
Hide DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

Try It Yourself

Applications should not be filled with animations, but some animations can make the application easier to understand.

What do I need?

To prepare your application for animations, you must include the AngularJS Animate library:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

Then, you must reference it in your application. ngAnimate Module:

<body ng-app="ngAnimate">

Or, if your application has a name, please set ngAnimate Add as a dependency to the application module:

When the DIV element gets

<body ng-app="myApp">
<h1>Hide DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

Try It Yourself

What is the purpose of ngAnimate?

ngAnimate module adds and removes classes.

ngAnimate The module does not animate your HTML elements, but when ngAnimate When certain events (such as the hiding or showing of HTML elements) are noticed, the element will obtain some predefined classes, which can be used to create animations.

Directives for adding/removing classes in AngularJS include:

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

ng-show and ng-hide directive adds or removes ng-hide Class values.

other directives add when entering the DOM ng-enter class values and add them when removed from the DOM ng-leave property.

When the HTML element changes its positionng-repeat The directive will also add ng-move Class values.

In addition, during the animation process, the HTML element will have a set of class values, which will be removed after the animation is completed. For example:ng-hide The directive will add these class values:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(If you want to hide the element)
  • ng-hide-remove(If you want to display the element)
  • ng-hide-add-active(If you want to hide the element)
  • ng-hide-remove-active(If you want to display the element)

Using CSS for Animation Processing

We can use CSS transitions or CSS animations to add animation effects to HTML elements. This tutorial will show you both.

For more information on CSS animations, please study our CSS Transitions tutorial and CSS Animations tutorial.

CSS Transitions

CSS transitions allow you to smoothly change the value of a CSS property from one value to another within a given duration:

When the DIV element gets

.ng-hide When the class is applied, the myChange animation will be run, which will smoothly transition the height from 100px to 0: At the same time, the transition will last for 0.5 seconds, and the height will smoothly transition from 100px to 0:

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
.ng-hide {
  height: 0;
}
</style>

Try It Yourself

CSS Animations

CSS animations allow you to smoothly change the value of a CSS property over a given duration:

When the DIV element gets

.ng-hide When the class is applied, the myChange animation will be run, which will smoothly transition the height from 100px to 0: <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

Try It Yourself