A Pen by alejonext.

index.jade

head
	// CSS 
	// load bootstrap (bootswatch version)
	link( rel="stylesheet", href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css")
	script( src="http://code.angularjs.org/1.2.13/angular.js")
	script( src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js")
	script( src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js")

// apply our angular app
body( ng-app="animateApp" )
	// inject our views using ng-view
	// each angular controller applies a different class here
	.page( class="{{ pageClass }}", ng-view )

script( type="text/ng-template", id="page-home.html" )
	h1 Angular Animations Shenanigans
	h2 Home
	a( href="#about" class="btn btn-success btn-lg" ) About
	a( href="#contact" class="btn btn-danger btn-lg") Contact

script( type="text/ng-template", id="page-about.html" )
	h1 Animating Pages Is Fun
	h2 About
	a(href="#" class="btn btn-primary btn-lg") Home
	a(href="#contact" class="btn btn-danger btn-lg") Contact

script( type="text/ng-template", id="page-contact.html" )
	h1 Animating Pages Is Fun
	h2 About
	a( href="#" class="btn btn-primary btn-lg") Home
	a(href="#about" class="btn btn-success btn-lg") Contact

IptmG.markdown

IptmG

A Pen by alejonext on CodePen.

License.

script.js

// app.js

// define our application and pull in ngRoute and ngAnimate
var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']);

// ROUTING ===============================================
// set our routing for this application
// each route will pull in a different controller
animateApp.config(function($routeProvider) {

    $routeProvider

    	// home page
    	.when('/', {
    		templateUrl: 'page-home.html',
            controller: 'mainController'
    	})

    	// about page
    	.when('/about', {
    		templateUrl: 'page-about.html',
            controller: 'aboutController'
    	})

    	// contact page
    	.when('/contact', {
    		templateUrl: 'page-contact.html',
            controller: 'contactController'
    	});

});


// CONTROLLERS ============================================
// home page controller
animateApp.controller('mainController', function($scope) {
    $scope.pageClass = 'page-home';
});

// about page controller
animateApp.controller('aboutController', function($scope) {
    $scope.pageClass = 'page-about';
});

// contact page controller
animateApp.controller('contactController', function($scope) {
    $scope.pageClass = 'page-contact';
});

style.less

.page        {
	bottom:0; 
	padding-top:200px;
	position:absolute; 
	text-align:center;
	top:0;  
	width:100%; 
}

.page h1 	{ font-size:60px; }
.page a     { margin-top:50px; }

/* PAGES (specific colors for each page)
============================================================================= */
.page-home 		{ background:#00D0BC; color:#00907c; }
.page-about 	{ background:#E59400; color:#a55400; }
.page-contact 	{ background:#ffa6bb; color:#9e0000; }

/* ANIMATIONS
============================================================================= */

/* leaving animations ----------------------------------------- */
/* rotate and fall */
@keyframes rotateFall {
	0% 		{ transform: rotateZ(0deg); }
	20% 	{ transform: rotateZ(10deg); animation-timing-function: ease-out; }
	40% 	{ transform: rotateZ(17deg); }
	60% 	{ transform: rotateZ(16deg); }
	100% 	{ transform: translateY(100%) rotateZ(17deg); }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
	to 		{ transform: translateX(-100%); }
}

/* rotate out newspaper */
@keyframes rotateOutNewspaper {
	to 		{ transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
	from 	{ opacity: 0.3; -webkit-transform: scale(0.8); }
}

/* slide in from the right */
@keyframes slideInRight {
	from 	{ transform:translateX(100%); }
	to 		{ transform: translateX(0); }
}

/* slide in from the bottom */
@keyframes slideInUp {
	from 	{ transform:translateY(100%); }
	to 		{ transform: translateY(0); }
}

.ng-enter 		{ z-index: 8888; }
.ng-leave 		{ z-index: 9999; }

	/* page specific animations ------------------------ */

	/* home -------------------------- */
.page-home.ng-enter 		{ animation: scaleUp 0.5s both ease-in; }
.page-home.ng-leave         { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; }

	/* about ------------------------ */
.page-about.ng-enter 		{ animation:slideInRight 0.5s both ease-in; }
.page-about.ng-leave        { animation:slideOutLeft 0.5s both ease-in; }

	/* contact ---------------------- */
.page-contact.ng-leave      { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; }
.page-contact.ng-enter 		{ animation:slideInUp 0.5s both ease-in; }