##AngularJS ngInclude animation
Created
August 7, 2015 04:04
-
-
Save anonymoussc/068568708c415a8bec9c to your computer and use it in GitHub Desktop.
AngularJS ngInclude 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
| <div> | |
| <h2>First page</h2> | |
| <p style="text-align:justify;"> | |
| Nuclear vexatum iaceres sunt eleatess de pius bubo. Devatio fatalis sectam est. Eheu, domesticus | |
| competition! Hercle, omnia clemens!. Competition azureus ratione est. Neuter valebat unus acquireres hilotae | |
| est. Eheu, teres adiurator! Pulchritudines ire in primus oenipons! Ubi est grandis liberi? Accola. | |
| </p> | |
| </div> |
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 ngInclude animation</title> | |
| <link href="style.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div ng-controller="animationsCtrl"> | |
| <p>Choose one template</p> | |
| <select ng-model="ngIncludeSelected" ng-options="item.name for item in ngIncludeTemplates"></select> | |
| <p>ngInclude:</p> | |
| <div class="ngIncludeRelative"> | |
| <div class="ngIncludeItem" ng-include="ngIncludeSelected.url"></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.ngIncludeTemplates = [ | |
| { | |
| name : 'first', | |
| url : 'first.html' | |
| }, | |
| { | |
| name : 'second', | |
| url : 'second.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
| <div> | |
| <h2>Second page</h2> | |
| <p style="text-align:justify;"> | |
| Castors nocere, tanquam fidelis stella. Index cadunts, tanquam primus calceus. Est magnum imber, cesaris. Cobaltum, | |
| lixa, et secula. Fortiss congregabo in rusticus tolosa! Neuter gloss ducunt ad agripeta. Animaliss assimilant in | |
| dexter tubinga! Sunt tabeses aperto barbatus, bassus. | |
| </p> | |
| </div> |
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
| .ngIncludeRelative { | |
| position : relative; | |
| height : 175px; | |
| overflow : hidden; | |
| } | |
| .ngIncludeItem { | |
| position : absolute; | |
| width : 500px; | |
| display : block; | |
| } | |
| .ngIncludeItem.ng-enter, | |
| .ngIncludeItem.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; | |
| } | |
| .ngIncludeItem.ng-enter { | |
| top : 100%; | |
| } | |
| .ngIncludeItem.ng-enter-active { | |
| top : 0; | |
| } | |
| .ngIncludeItem.ng-leave { | |
| top : 0; | |
| } | |
| .ngIncludeItem.ng-leave-active { | |
| top : -100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment