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:
