使用ngView配合AngularJS应用实现动画效果的方法

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
 
<!-- CSS -->
<!-- load bootstrap (bootswatch version) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
 
<!-- JS -->
<!-- load angular, ngRoute, ngAnimate -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script src="app.js"></script>
 
</head>
 
<!-- apply our angular app -->
<body ng-app="animateApp">
 
<!-- inject our views using ng-view -->
<!-- each angular controller applies a different class here -->
<div class="page {{ pageClass }}" ng-view></div>
 
</body>
</html>

// 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';
});

<!-- page-home.html -->
<h1>Angular Animations Shenanigans</h1>
<h2>Home</h2>
 
<a href="#about" class="btn btn-success btn-lg">About</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
 
<!-- page-about.html -->
<h1>Animating Pages Is Fun</h1>
<h2>About</h2>
 
<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
 
<!-- page-contact.html -->
<h1>Tons of Animations</h1>
<h2>Contact</h2>
 
<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#about" class="btn btn-success btn-lg">About</a>

/* make our pages be full width and full height */
/* positioned absolutely so that the pages can overlap each other as they enter and leave */
.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; }

/* style.css */
...
 
/* 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); }
}

/* style.css */
...
 
.ng-enter { animation: scaleUp 0.5s both ease-in; z-index: 8888; }
.ng-leave { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }
 
...

...
 
.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; }
 
...