AngularJS Animations

AngularJS provides animation effects that can be used with CSS.

To use animations, AngularJS requires the angular-animate.min.js library.

<script src="../libs/angular.js/1.4.6/angular-animate.min.js.html"></script>

You also need to use the ngAnimate module in your application:

<body ng-app="ngAnimate">

What is an animation?

Animations are dynamic changing effects produced by altering HTML elements.

Example

Check the checkbox to hide the DIV:

<body ng-app="ngAnimate">

Hide the DIV:<input type="checkbox" ng-model="myCheck">

<div ng-hide="myCheck"></div>

</body>

Try it Yourself »
Note Animations should not be used too much in applications, but appropriate use of animations can enrich the page and make it easier for users to understand.

If our application has already set the application name, we can directly add ngAnimate to the module:

Example

<body ng-app="myApp">

<h1>Hide the 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 does ngAnimate do?

The ngAnimate module can add or remove classes.

The ngAnimate module does not itself make HTML elements animate, but ngAnimate monitors events, such as hiding and showing HTML elements. If an event occurs, ngAnimate will use predefined classes to set animations for the HTML elements.

AngularJS directives that add/remove classes:

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

ng-showandng-hideThe directive is used to add or removeng-hideclass values.

Other directives will addng-enterclasses when entering the DOM, and when removed from the DOM, will addng-leaveattributes.

When the position of an HTML element changes,ng-repeatthe directive can also addng-moveclasses.

In addition, after the animation is completed, the class collection of the HTML element will be removed. For example:ng-hideThe directive will add the following classes:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(if the element will be hidden)
  • ng-hide-remove(if the element will be shown)
  • ng-hide-add-active(if the element will be hidden)
  • ng-hide-remove-active(if the element will be shown)

Using CSS Animations

We can use CSS transitions or CSS animations to animate HTML elements. For this part, you can refer to ourCSS Transition Tutorial， CSS Animation Tutorial。

CSS Transitions

CSS transitions allow us to smoothly change one CSS property value to another:

Example

When the DIV element is set with the.ng-hideclass, the transition takes 0.5 seconds, changing the height from 100px to 0:

<style>
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 modify CSS property values:

Example

When the DIV element is set with the.ng-hideclass,myChangethe animation will execute, smoothly changing the height from 100px to 0:

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

Try it Yourself »
Other Extensions