To create animation effects in AngularJS using the ngAnimate module, which provides support for CSS-based animations. Animation is something that is used to give a dynamic motion effect. Here HTML is transformed to give an illusion of motion using the ngAnimate module that gives us a combined effect of Javascript and CSS. Using this sample code, the demonstration of hiding the division/section is shown up by checking the checkbox.
Steps to bring Animation using AngularJs into the picture:
Include Angular.Js animate lib in script tag as:
src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js”
Refer to the ngAnimate module inside the body tag as:
ng-app=”ngAnimate”
ngAnimate module adds and removes classes. The Directives used in AngularJS that add/remove classes are:
ng-show, ng-hide
Example: This example describes the implementation of Angular.Js animation.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< script src =
</ script >
< style >
div {
transition: 0.6s;
border-radius: 500%;
height: 250px;
width: 250px;
background-color: red;
display: inline-block;
}
.ng-hide {
background-color: yellow;
top: 5px;
left: 100px;
}
</ style >
</ head >
< body ng-app = "ngAnimate" style = "text-align:center" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 >AngularJS Animations</ h3 >
< h3 >Hide the Circle
< input type = "checkbox" ng-model = "myCheck" >
</ h3 >
< div ng-hide = "myCheck" ></ div >
</ body >
</ html >
|
Output:
Last Updated :
06 Sep, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...