##AngularJS ngSwitch animation
Created
August 7, 2015 03:53
-
-
Save anonymoussc/7cffd47a6f150d59677a to your computer and use it in GitHub Desktop.
AngularJS ngSwitch animation
This file contains 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> | |
| <html ng-app="myApp"> | |
| <head> | |
| <title>AngularJS ngSwitch animation</title> | |
| <link href="style.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div ng-controller="animationsCtrl"> | |
| <p>Choose an item:</p> | |
| <select ng-model="ngSwitchSelected" ng-options="item for item in ngSwitchItems"></select> | |
| <p>Selected item:</p> | |
| <div class="switchItemRelative" ng-switch on="ngSwitchSelected"> | |
| <div class="switchItem" ng-switch-when="item1">Item 1</div> | |
| <div class="switchItem" ng-switch-when="item2">Item 2</div> | |
| <div class="switchItem" ng-switch-when="item3">Item 3</div> | |
| <div class="switchItem" ng-switch-default>Default Item</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> |
This file contains 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
| var app = angular.module('myApp', ['ngAnimate']); | |
| app.controller('animationsCtrl', function ($scope) { | |
| $scope.ngSwitchItems = ['item1', 'item2', 'item3']; | |
| }); |
This file contains 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
| /* ngSwitch animation */ | |
| .switchItemRelative { | |
| position : relative; | |
| height : 25px; | |
| overflow : hidden; | |
| } | |
| .switchItem { | |
| position : absolute; | |
| width : 500px; | |
| display : block; | |
| } | |
| /*The transition is added when the switch item is about to enter or about to leave DOM*/ | |
| .switchItem.ng-enter, | |
| .switchItem.ng-leave { | |
| -webkit-transition : 300ms linear all; | |
| -moz-transition : 300ms linear all; | |
| -ms-transition : 300ms linear all; | |
| -o-transition : 300ms linear all; | |
| transition : 300ms linear all; | |
| } | |
| /* When the element is about to enter DOM*/ | |
| .switchItem.ng-enter { | |
| bottom : 100%; | |
| } | |
| /* When the element completes the enter transition */ | |
| .switchItem.ng-enter-active { | |
| bottom : 0; | |
| } | |
| /* When the element is about to leave DOM*/ | |
| .switchItem.ng-leave { | |
| bottom : 0; | |
| } | |
| /*When the element end the leave transition*/ | |
| .switchItem.ng-leave-active { | |
| bottom : -100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment