AngularJS Animations (ngAnimate)

  Total Views : 689
  Comments : 0
 
  Keywords : create animations in angularjs with nganimate module example, Angularjs animations tutorial, Angularjs animations with ng-show / ng-hide, Add css animation in angularjs applications example

Here we will learn animation effect in angularjs with 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 below steps.

 

To provide animation effects we need to add 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 reference to module we create for application like as shown below.

 

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

AngularJS Animations Example

Following is the example of using ngAnimate module to add animation effect to 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 animation effect to html elements whenever it identifies certain events raised like show / hide, etc.

 

Following are the some of directives which 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 animation effect for html elements.

 

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

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User