Animation

The ngAnimate module does not animate your HTML elements. However, when ngAnimate notices certain events, such as hiding or showing an HTML element, the element receives some pre-defined classes that can be used to create animations.


The directives in AngularJS that add/remove classes are:

To make your applications ready for animations, you must include the AngularJS Animate library:

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


<html>
<style>
div
{
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide
{
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<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>
</body>
</html>


CSS Animation


<html>
<style>
@keyframes myChange
{
from
{
height: 100px;
}
to
{
height: 0;
}
}
div
{
height: 100px;
background-color: lightblue;
}
div.ng-hide
{
animation: 0.5s myChange;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck">
</div>
</body>
</html>