AngularJS Animations

AngularJS provides animation effects that can be used in conjunction with CSS.

To use animations in AngularJS, you need to include the angular-animate.min.js library.

<script src="http://cdn.static.tutorialpro.org/libs/angular.js/1.4.6/angular-animate.min.js"></script>

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

<body ng-app="ngAnimate">

What is Animation?

Animation is the dynamic effect produced by changing HTML elements.

Example

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>

| | Animations should not be overused in applications, but using them appropriately can enrich the page and make it easier for users to understand. | | --- | --- |

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

Example

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

What does ngAnimate do?

The ngAnimate module can add or remove classes.

The ngAnimate module does not animate HTML elements itself, but it monitors events such as hiding or showing HTML elements. When such events occur, ngAnimate uses predefined classes to animate 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

The ng-show and ng-hide directives add or remove the ng-hide class.

Other directives add the ng-enter class when entering the DOM and the ng-leave class when leaving the DOM.

The ng-repeat directive can also add the ng-move class when the position of HTML elements changes.

Additionally, after the animation completes, the class set of the HTML element will be removed. For example, the ng-hide 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 more information, you can refer to our CSS Transitions tutorial and CSS Animations tutorial.

CSS Transitions

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

Example

When the DIV element has the .ng-hide class, 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>

CSS Animations

CSS animations allow you to smoothly modify CSS property values:

Example

When the DIV element has the .ng-hide class, the myChange 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>

❮ Angularjs Expressions Ng Ng Blur ❯