##AngularJS ngView animation
Created
August 6, 2015 23:24
-
-
Save anonymoussc/8f27751471ab16adff5c to your computer and use it in GitHub Desktop.
AngularJS ngView 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 ngView animation</title> | |
| <link href="style.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div class="ngViewRelative"> | |
| <a href="#/First">First page</a> | <a href="#/Second">Second page</a> | |
| <div ng-view class="ngViewContainer"></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="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.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', 'ngRoute']); | |
| app.config(['$routeProvider', | |
| function ($routeProvider) { | |
| $routeProvider | |
| .when('/First', { | |
| templateUrl : 'first.html' | |
| }) | |
| .when('/Second', { | |
| templateUrl : 'second.html' | |
| }) | |
| .otherwise({ | |
| redirectTo : '/First' | |
| }); | |
| } | |
| ]); |
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
| .ngViewRelative { | |
| position : relative; | |
| /*height: 300px;*/ | |
| } | |
| .ngViewContainer { | |
| position : absolute; | |
| width : 500px; | |
| display : block; | |
| } | |
| .ngViewContainer.ng-enter, | |
| .ngViewContainer.ng-leave { | |
| -webkit-transition : 600ms linear all; | |
| -moz-transition : 600ms linear all; | |
| -ms-transition : 600ms linear all; | |
| -o-transition : 600ms linear all; | |
| transition : 600ms linear all; | |
| } | |
| .ngViewContainer.ng-enter { | |
| transform : translateX(500px); | |
| } | |
| .ngViewContainer.ng-enter-active { | |
| transform : translateX(0px); | |
| } | |
| .ngViewContainer.ng-leave { | |
| transform : translateX(0px); | |
| } | |
| .ngViewContainer.ng-leave-active { | |
| transform : translateX(-1000px); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment