AngularJS Animations (ngAnimate)

Here we will learn animation effect in angularjs with an example, how to use ngAnimate module in angularjs to implement animations with example.

AngularJS Animations (ngAnimate)

In angularjs ngAnimate module will provide a CSS based animation transitions effect to elements while performing show/hide or fade in / fade out, etc. events.

 

In angularjs ngAnimate module will add/remove some pre-defined CSS classes to HTML elements to provide animation effect whenever certain events raised like show/hide elements.

How to use ngAnimate in AngularJS?

To provide animation effect to HTML elements while performing events like show/hide, etc. in angularjs we need to follow the below steps.

 

To provide animation effects we need to add the following animation library to our application

 

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

Now we need to add ngAnimate module to our application like as shown below to enable animation effect.

 

We can add ngAnimate module in two ways like directly adding ngAnimate in ng-app section like as shown below

 

<body ng-app="ngAnimate">

In case if we defined our application name in ng-app then we need to add ngAnimate as a reference to the module we create for an application like as shown below.

 

var app = angular.module("angularapp", ["ngAnimate"]);

AngularJS Animations Example

Following is the example of using ngAnimate module to add an animation effect to the application while performing events like showing/hiding events.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>AngularJS Animations Example</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

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

<script type="text/javascript">

var app = angular.module("angularapp", ["ngAnimate"]);

</script>

<style>

div

{

transitionall linear 0.5s;

background-color#08c;

width30%;

padding:30px;

border:1px solid black;

}

.ng-hide {

opacity:0;

}

</style>

</head>

<body ng-app="angularapp">

<h2>AngularJS Animations Example</h2>

Show / Hide Div <input type="checkbox" ng-model="chkselct"><br /><br />

<div ng-hide='chkselct' style="clear:both;">Hi Welcome to Angularjs... Hello World</div>

</body>

</html>

Output of AngularJS Animations Example

Following is the result of implement animations effect to angularjs applications using ngAnimate module.

 

Angularjs animations example result or output

 

As we discussed ngAnimate module will not animate elements it will add/remove some pre-defined classes to add an animation effect to HTML elements whenever it identifies certain events raised like show/hide, etc.

 

The following are some of the directives that supports animation effect.

 

Whenever ng-show / hide events raised ngAnimate module is used ng-hide class to add/remove animation effect.

 

The other directives use ng-enter and ng-leave classes to add/remove the animation effect for HTML elements.

 

This is how we can implement an animation effect to the elements in angularjs applications using the ngAnimate module.

Topics Covered