Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
AngularJS Animation (ngAnimate) Example
Keywords : Angularjs animation example, Angularjs ng animate example, Angularjs create animation using nganimate module example, Angularjs ng animate slide demo example, Animations example in angularjs
Example
<!DOCTYPE html> <html> <head> <title>AngularJS Animations Example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script> <script type="text/javascript"> var app = angular.module("angularapp", ["ngAnimate"]); </script> <style> div { transition: all linear 0.5s; background-color: #08c; width: 30%; padding:30px; border:1px solid black; } .ng-hide { opacity:0; } </style> </head> <body ng-app="angularapp"> <h2>AngularJS Animations Example</h2> Show / Hide Div <input type="checkbox" ng-model="chkselct"><br /><br /> <div ng-hide='chkselct' style="clear:both;">Hi Welcome to Angularjs... Hello World</div> </body> </html>
Click Here to See Result
Result
Previous
Next
