AngularJS Animations (ng-animate)

AngularJS Animations (ng-animate): In angularjs, the ngAnimate module is used to specify the CSS animation transition effect to the elements while performing events like show/hide or fade in/fade out, etc.

The ng-Animate is used to add or remove pre-defined CSS classes to specify animation effect when the events raised like a show or hide elements.

How to use ng-animate?

To use an ng-animate module in angular js that perform events like show/hide etc, use the following code.

<script src=""></script>

now we need to add ngAnimate module to our application to get an animation

<body ng-app="ngAnimate">

To add ngAnimate as a reference to module in ng-app then use the following code.

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

AngularJS Animations Example

<!DOCTYPE html>
<title>AngularJS Animations Example</title>
<script src=""></script>
<script src=""></script>
<script type="text/javascript">
var app = angular.module("angularapp", ["ngAnimate"]);
transition: all linear 0.5s;
background-color: #0000FF;
width: 30%;
border:1px solid black;
ng-hide {
<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>

AngularJS Animations Example Output

Angular JS Animations Example Output