| <!DOCTYPE html> | |
| <html ng-app="myApp"> | |
| <head> | |
| <title>AngularJS ngHide sample</title> | |
| <link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/> | |
| <link href="style.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div> | |
| <div> | |
| <button ng-click="disabled = !disabled">Toggle ngHide animation</button> | |
| <div ng-hide="disabled" class="ngHideSample bg-success"> | |
| This element has the ng-hide directive. | |
| </div> | |
| </div> | |
| </div> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
| var app = angular.module('myApp', ['ngAnimate']); |
| /* ngHide animation */ | |
| .ngHideSample { | |
| padding : 10px; | |
| margin : 5px; | |
| } | |
| .ngHideSample.ng-hide-add { | |
| -webkit-transition : all linear 0.3s; | |
| -moz-transition : all linear 0.3s; | |
| -ms-transition : all linear 0.3s; | |
| -o-transition : all linear 0.3s; | |
| opacity : 1; | |
| } | |
| .ngHideSample.ng-hide-add-active { | |
| opacity : 0; | |
| } | |
| .ngHideSample.ng-hide-remove { | |
| -webkit-transition : all linear 0.3s; | |
| -moz-transition : all linear 0.3s; | |
| -ms-transition : all linear 0.3s; | |
| -o-transition : all linear 0.3s; | |
| opacity : 0; | |
| } | |
| .ngHideSample.ng-hide-remove-active { | |
| opacity : 1; | |
| } |