AngularJS | Animations
To create animation effect in Angular.Js using ngAnimate module, that provides support for CSS based animations.
The animation is something that is used to give a dynamic motion effect. Here HTML is transformed to give an illusion of motion using ngAnimate module that gives us a combined effect of Javascript and CSS.
Using this sample code, the demonstration of hiding the division/section is showed 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 body tag as:
ng-app=”ngAnimate”
- ngAnimate module adds and removes classes.The Directives used in AngularJS that adds/removes classes are:
ng-show, ng-hide
Examples: Below is the implementation of Angular.Js animation.
<html> <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> <script src= </script> <script src= </script> <body ng-app="ngAnimate"> <h1>Hide the Circle <input type="checkbox" ng-model="myCheck"> </h1> <div ng-hide="myCheck"></div> </body> </html> |
Output:
Before:
After:
.png)
