AngularJS Animations

1.What is Animation?

The animation is the process of making the illusion of motion and changing the display. In this ngAnimate is used to add and remove classes.

 

Some of  them to add and remove classes are:

  •    ng-show
  •    ng-hide
  •    ng-class
  •    ng-view
  •    ng-include
  •    ng-repeat
  •    ng-if
  •    ng-switch

<! DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<style>
div{
transition: all linear 0.5s;
background-color: peachpuff;
height:100px;
width:25%;
position: relative;
top: 0;
left: 0;
}
.ng-hide{
height:0;
width:0;
background-color:transparent;
top:200px;
right: 200px;
}
</style>
</head>
<body  ng-app="myFirstApp">
<h1>Hide The Div:<input type="checkbox" 
ng-model="check"></h1>
<div ng-hide="check"></div>
<script>
var  myFirstApp = angular.module('myFirstApp', ['ngAnimate']);
</script>
</body>
</html>

 

2.What is CSS Transitions?

CSS Transition allows to changing CSS properties from one value to another in a given duration.

<! DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<style>
div{
tansition: all linear 0.5s;
background-color: peachpuff;
height:100px;
}
.ng-hide{
height:0;
}
</style>
</head>
<div ng-app="myFirstApp">
<h1>Hide The Div:<input type="checkbox" 
ng-model="check"></h1>
<div ng-hide="check"></div>
<script>
var  myFirstApp = angular.module('myFirstApp', ['ngAnimate']);
</script>
</body>
</html>

 

3. What is CSS Animations?

CSS Animation allows to changing CSS properties from one value to another in a given duration.

<! DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<style>
@keyframes  myChange{
from{
height:100px;
}to{height:0;}
}
div{
height:100px;
background-color: peachpuff;
}
.ng-hide{
animation: 1.5s myChange;
}
</style>
</head>
<body ng-app="ngAnimate">
<h1>Hide The Div:<input type="checkbox" 
ng-model="check"></h1>
<div ng-hide="check"></div>
</body>
</html>