Description
The occurrence object's motion due to the transformation of HTML element is known as Animation. It is not required that AngularJS applications fully comprised of animations, but those animations should make the user to understand about the application easily.
Step-1 : In order to use AngularJs Animations in applications, include the
AngularJS Animate library, which looks like below.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular-animate.js"></script>
Step-2 : The module ngAnimate has to be binded to ng-app directive or if the application is given a name, add ngAnimate as a dependency in the application module. Example
index.html
[html]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular-animate.js"></script>
</head>
<body ng-app="spApp">
<h3>Click on below checkbox to see the animation effect </h3>
<input type="checkbox" ng-model="spCheck" />
<div ng-hide="spCheck"></div>
<script>
var app = angular.module('spApp', ['ngAnimate']);
</script>
</body>
</html>
[/html]
style.css
[css]
/* Styles go here */
div {
transition: all linear 0.5s;
background-color: lightpink;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
[/css]
Output:
Description
AngularJS do not create animation by animating HTML elements. The pre-defined classes are added and removed by ngAnimate module.
AngularJS directives that are add/remove classes are:
All the above directives are discussed in AngularJS HTML DOM chapter.
During Animation in AngularJS, a set of class values are present in HTML element, which are then be cleared when the animation is completed. Example: the ng-hide directive will add these class values:
- ng-show
- ng-hide
- ng-class
- ng-include
- ng-if
- ng-switch
- ng-repeat
- ng-view
ng-animateng-hide-animateng-hide-add(if the element will be hidden)ng-hide-remove(if the element will be showed)ng-hide-add-active(if the element will be hidden)ng-hide-remove-active(if the element will be showed)
Key Points
- The motion of objects due to the transformation of HTML element is known as Animation.
- To add animation to the AngularJS Application, you should add ngAnimate module to ng-App directive.