<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header -->
<nav>
<a ng-click="go('/page1', 'slideLeft')">Page 1</a>
<a ng-click="go('/page2', 'slideRight')">Page 2</a>
<a ng-click="go('/page3', 'slideDown')">Page 3</a>
<a ng-click="go('/page4')">Page 4</a> <!-- note: no transition specified -->
</nav>
<!-- App Content Container -->
<div class="page-container">
<div ng-view="" class="page-view" ng-class="pageAnimationClass"></div>
</div>
<!-- Example page partials -->
<script type="text/ng-template" id="page1.html">
<div id="page1" class="pages">
<h1>Page 1</h1>
<p>Here's a simple, scalable approach for page transitions in a single page app using the new(ish) class-based animation support for ng-view: a rootScope 'go' method.</p>
<pre>
$rootScope.go = function (path, pageAnimationClass) {
if (typeof(pageAnimationClass) === 'undefined') { // Use a default, your choice
$rootScope.pageAnimationClass = 'crossFade';
}
else { // Use the specified animation
$rootScope.pageAnimationClass = pageAnimationClass;
}
if (path === 'back') { // Allow a 'back' keyword to go to previous page
$window.history.back();
}
else { // Go to the specified path
$location.path(path);
}
};
</pre>
<p>We add the 'pageAnimationClass' class to the view container with ng-class and set up any number of arbitrary page transitions in our css file.</p>
</div>
</script>
<script type="text/ng-template" id="page2.html">
<div id="page2" class="pages">
<h1>Page 2</h1>
<p>Use the method from any page in an ng-click or other event handler.</p>
<p><a ng-click="go('/page3', 'slideUp')">Slide up Page 3</a></p>
<code><a ng-click="go('/page3', 'slideUp')">Slide up Page 3</a></code>
</div>
</script>
<script type="text/ng-template" id="page3.html">
<div id="page3" class="pages">
<h1>Page 3</h1>
<p>We can also include a 'back' keyword for convenience</p>
<p><a ng-click="go('back', 'slideLeft')">Slide left back to the previous page</a></p>
<code><a ng-click="go('back', 'slideLeft')">Slide left...</a></code>
</div>
</script>
<script type="text/ng-template" id="page4.html">
<div id="page4" class="pages">
<h1>Page 4</h1>
<p>The transition class is optional since we set a default in our go method.</p>
<p><a ng-click="go('/page1')">Use the default transition (crossFade) to go to page 1</a></p>
<code><a ng-click="go('/page1')">Use the default...</a></code>
</div>
</script>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://code.angularjs.org/1.2.0/angular-route.js"></script>
<script src="https://code.angularjs.org/1.2.0/angular-animate.js"></script>
<script src="script.js"></script>
</body>
</html>
// Declare the main module
var myApp = angular.module('myApp', [
'ngRoute',
'ngAnimate'
]);
// Initialize the main module
myApp.run(['$rootScope', '$location', '$window', function ($rootScope, $location, $window) {
'use strict';
/**
* Helper method for main page transitions. Useful for specifying a new page partial and an arbitrary transition.
* @param {String} path The root-relative url for the new route
* @param {String} pageAnimationClass A classname defining the desired page transition
*/
$rootScope.go = function (path, pageAnimationClass) {
if (typeof(pageAnimationClass) === 'undefined') { // Use a default, your choice
$rootScope.pageAnimationClass = 'crossFade';
}
else { // Use the specified animation
$rootScope.pageAnimationClass = pageAnimationClass;
}
if (path === 'back') { // Allow a 'back' keyword to go to previous page
$window.history.back();
}
else { // Go to the specified path
$location.path(path);
}
};
}]);
// Configure the main module
myApp.config(['$routeProvider', function ($routeProvider) {
'use strict';
$routeProvider
.when('/page1', {
templateUrl: 'page1.html'
})
.when('/page2', {
templateUrl: 'page2.html'
})
.when('/page3', {
templateUrl: 'page3.html'
})
.when('/page4', {
templateUrl: 'page4.html'
})
.otherwise({
templateUrl: 'page1.html'
});
}]);
*
{
box-sizing: border-box;
}
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
nav
{
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
padding: 1rem;
border-bottom: 1px solid #555;
background-color: #fff;
}
nav a
{
display: inline-block;
padding: 0 1rem;
cursor: pointer;
text-transform: uppercase;
}
/* partial containers */
.page-container
{
position: relative;
width: 100%;
height: 100%;
margin-top: 3rem;
/*transform*/
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.page-view
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
/*backface-visibility*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
/*perspective*/
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
}
.pages
{
height: inherit;
padding: 2rem;
}
#page1
{
background-color: #0ac2d2;
}
#page2
{
background-color: #60d7a9;
}
#page3
{
background-color: #fdc162;
}
#page4
{
background-color: #fd6a62;
}
/* Transitions */
/* Default Enter/Leave */
.ng-enter,
.ng-leave
{
/*transition-timing-function*/
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
/*transition-duration*/
-webkit-transition-duration: 250ms;
-moz-transition-duration: 250ms;
-o-transition-duration: 250ms;
transition-duration: 250ms;
/*transition-property*/
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
.ng-enter
{
opacity: 0;
}
.ng-enter.ng-enter-active
{
opacity: 1;
}
.ng-leave
{
opacity: 1;
}
.ng-leave.ng-leave-active
{
opacity: 0;
}
/* crossFade */
.crossFade.ng-enter
{
/*transition-duration*/
-webkit-transition-duration: 100ms;
-moz-transition-duration: 100ms;
-o-transition-duration: 100ms;
transition-duration: 100ms;
opacity: 0;
}
.crossFade.ng-enter.ng-enter-active
{
opacity: 1;
}
.crossFade.ng-leave
{
/*transition-duration*/
-webkit-transition-duration: 100ms;
-moz-transition-duration: 100ms;
-o-transition-duration: 100ms;
transition-duration: 100ms;
opacity: 1;
}
.crossFade.ng-leave.ng-leave-active
{
opacity: 0;
}
/* slideRight */
.slideRight
{
opacity: 1 !important;
}
.slideRight.ng-enter
{
/*transition-property*/
-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;
/*transform*/
-webkit-transform: translate3d(-100%,0,0);
-moz-transform: translate3d(-100%,0,0);
-ms-transform: translate3d(-100%,0,0);
-o-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
.slideRight.ng-enter.ng-enter-active
{
/*transition-property*/
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
/*transform*/
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.slideRight.ng-leave
{
/*transition-property*/
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
/*transform*/
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.slideRight.ng-leave.ng-leave-active
{
/*transition-property*/
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
/*transform*/
-webkit-transform: translate3d(100%,0,0);
-moz-transform: translate3d(100%,0,0);
-ms-transform: translate3d(100%,0,0);
-o-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
/* slideLeft */
.slideLeft
{
opacity: 1 !important;
}
.slideLeft.ng-enter
{
/*transition-property*/
-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;
/*transform*/
-webkit-transform: translate3d(100%,0,0);
-moz-transform: translate3d(100%,0,0);
-ms-transform: translate3d(100%,0,0);
-o-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.slideLeft.ng-enter.ng-enter-active
{
/*transition-property*/
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
/*transform*/
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.slideLeft.ng-leave
{
/*transition-property*/
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
/*transform*/
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.slideLeft.ng-leave.ng-leave-active
{
/*transition-property*/
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
/*transform*/
-webkit-transform: translate3d(-100%,0,0);
-moz-transform: translate3d(-100%,0,0);
-ms-transform: translate3d(-100%,0,0);
-o-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
/* slideDown */
.slideDown.ng-enter
{
/*transition-property*/
-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;
/*transform*/
-webkit-transform: translate3d(0,-100%,0);
-moz-transform: translate3d(0,-100%,0);
-ms-transform: translate3d(0,-100%,0);
-o-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
.slideDown.ng-enter.ng-enter-active
{
/*transition-property*/
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
/*transform*/
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.slideDown.ng-leave
{
/*transition-property*/
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
/*transform*/
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.slideDown.ng-leave.ng-leave-active
{
/*transition-property*/
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
/*transform*/
-webkit-transform: translate3d(0,100%,0);
-moz-transform: translate3d(0,100%,0);
-ms-transform: translate3d(0,100%,0);
-o-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
/* slideUp */
.slideUp
{
opacity: 1 !important;
}
.slideUp.ng-enter
{
/*transition-property*/
-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;
/*transform*/
-webkit-transform: translate3d(0,100%,0);
-moz-transform: translate3d(0,100%,0);
-ms-transform: translate3d(0,100%,0);
-o-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.slideUp.ng-enter.ng-enter-active
{
/*transition-property*/
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
/*transform*/
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.slideUp.ng-leave
{
/*transition-property*/
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
/*transform*/
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.slideUp.ng-leave.ng-leave-active
{
/*transition-property*/
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
/*transform*/
-webkit-transform: translate3d(0,-100%,0);
-moz-transform: translate3d(0,-100%,0);
-ms-transform: translate3d(0,-100%,0);
-o-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
# AngularJS Page Transitions