Animation Using AngularJS

  1. <!DOCTYPE html>  
  2. <html>  
  3. <style>  
  4. div {  
  5.   transition: all linear 0.5s;  
  6.   background-color: red;  
  7.   height: 100px;  
  8.   width: 100%;  
  9.   position: relative;  
  10.   top: 0;  
  11.   left: 0;  
  12. }  
  13.   
  14. .ng-hide {  
  15.   height: 0;  
  16.   width: 0;  
  17.   background-color: transparent;  
  18.   top:-200px;  
  19.   left: 200px;  
  20. }  
  21.   
  22. </style>  
  23. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  24. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>  
  25.   
  26. <body ng-app="ngAnimate">  
  27.   
  28. <h1>click to hide: <input type="checkbox" ng-model="myCheck"></h1>  
  29.   
  30. <div ng-hide="myCheck"></div>  
  31.   
  32. </body>  
  33. </html>