Last active
August 29, 2015 14:02
-
-
Save chirayuk/9fa527e94f402e5358c3 to your computer and use it in GitHub Desktop.
ng-show example for tran
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .myDiv { | |
| padding:10px; | |
| border:1px solid black; | |
| background:white; | |
| overflow: hidden; | |
| } | |
| .myDiv.ng-hide-add.ng-hide-add-active, | |
| .myDiv.ng-hide-remove { | |
| opacity: 0; | |
| height: 0px; | |
| } | |
| .myDiv.ng-hide-add, | |
| .myDiv.ng-hide-remove.ng-hide-remove-active { | |
| opacity: 1; | |
| height:4em; | |
| } | |
| .myDiv.ng-hide-add, | |
| .myDiv.ng-hide-remove { | |
| -webkit-transition: 218ms linear all; | |
| -moz-transition: 218ms linear all; | |
| -o-transition: 218ms linear all; | |
| transition: 218ms linear all; | |
| display:block!important; | |
| } | |
| .fadeIn-setup, .fadeOut-setup.fadeOut-start { | |
| opacity:0; | |
| } | |
| .fadeOut-setup, .fadeIn-setup.fadeIn-start { | |
| opacity: 1; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- Based on: http://jsfiddle.net/Kx4TS/185/ --> | |
| <html> | |
| <head> | |
| <title>AngularJS Animation: ng-show example</title> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta name="Description" content="AngularJS Animation: ng-show example"> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-animate.js"></script> | |
| <script src="index.js" type="text/javascript" charset="utf-8"></script> | |
| <link rel="stylesheet" href="index.css" type="text/css" charset="utf-8"> | |
| </head> | |
| <body> | |
| <div ng-app="ngAnimate"> | |
| <div ng-controller='ctrl'> | |
| <input type='button' value='click' ng-click='clicked()' /> | |
| <div ng-show="foo == true" class='myDiv'> | |
| <table> | |
| <tr><td>1</td></tr> | |
| <tr><td>2</td></tr> | |
| <tr><td>3</td></tr> | |
| <tr><td>4</td></tr> | |
| <tr><td>5</td></tr> | |
| </table> | |
| </div> | |
| <div> | |
| HELLO WORLD | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Based on: http://jsfiddle.net/Kx4TS/185/ | |
| function ctrl($scope){ | |
| $scope.foo = false; | |
| $scope.clicked = function(){ | |
| $scope.foo = !($scope.foo); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment