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: