先看效果(免费下载：http://download.csdn.net/download/zhaoqingkaitt/9731154)
js代码：
var animateApp = angular.module('animateApp',['ngRoute','ngAnimate']);
animateApp.config(function($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'home.html',controller: 'mainController'
})
.when('/about',{
templateUrl: 'about.html',controller: 'aboutController'
})
.when('/contact',{
templateUrl: 'contact.html',controller: 'contactController'
});
});
animateApp.controller('mainController',function($scope) {
$scope.pageClass = 'page-home';
});
animateApp.controller('aboutController',function($scope) {
$scope.pageClass = 'page-about';
});
animateApp.controller('contactController',function($scope) {
$scope.pageClass = 'page-contact';
});
HTML
<body ng-app="animateApp">
<div class="page {{ pageClass }}" ng-view></div>
<div id="about">
<p>A demo on Angular Animations: ng-view</p>
<p>View the <a href="http://scotch.io/tutorials/javascript/animating-angularjs-apps-ngview">Scotch.io Tutorial</a></p>
</div>
</body>
<script id="home.html" type="text/ng-template">
<h3>Angular Animations Shenanigans</h3>
<h4>Home</h4>
<a href="#about" class="btn btn-success btn-lg">About</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
</script>
<script type="text/ng-template" id="about.html">
<h3>Animating Pages Is Fun</h3>
<h4>About</h4>
<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
</script>
<script type="text/ng-template" id="contact.html">
<h3>Tons of Animations</h3>
<h4>Contact</h4>
<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#about" class="btn btn-success btn-lg">About</a>
</script>CSS
/* BASE STYLES
============================================================================= */
html { overflow-y:hidden; }
.page {
bottom:0;
padding-top:200px;
position:absolute;
text-align:center;
top:0;
width:100%;
}
.page h3 { font-size:40px; }
.page a { margin-top:30px; }
#about { color:#333; position:absolute; text-align:center; top:50px; width:100%; }
/* PAGES
============================================================================= */
.page-home { background:#00D0BC; color:#00907c; }
.page-about { background:#E59400; color:#a55400; }
.page-contact { background:#ffa6bb; color:#9e0000; }
/* ANIMATIONS
============================================================================= */
.page.ng-leave { z-index:9999; }
.page.ng-enter { z-index:8888; }
/* page specific animations ------------------------ */
/* home -------------------------- */
.page-home.ng-leave {
-webkit-transform-origin: 0% 0%;
-webkit-animation: rotateFall 1s both ease-in;
-moz-transform-origin: 0% 0%;
-moz-animation: rotateFall 1s both ease-in;
transform-origin: 0% 0%;
animation: rotateFall 1s both ease-in;
}
.page-home.ng-enter {
-webkit-animation:scaleUp 0.5s both ease-in;
-moz-animation:scaleUp 0.5s both ease-in;
animation:scaleUp 0.5s both ease-in;
}
/* about ------------------------ */
.page-about.ng-leave {
-webkit-animation:slideOutLeft 0.5s both ease-in;
-moz-animation:slideOutLeft 0.5s both ease-in;
animation:slideOutLeft 0.5s both ease-in;
}
.page-about.ng-enter {
-webkit-animation:slideInRight 0.5s both ease-in;
-moz-animation:slideInRight 0.5s both ease-in;
animation:slideInRight 0.5s both ease-in;
}
/* contact ---------------------- */
.page-contact.ng-leave {
-webkit-transform-origin: 50% 50%;
-webkit-animation: rotateOutNewspaper .5s both ease-in;
-moz-transform-origin: 50% 50%;
-moz-animation: rotateOutNewspaper .5s both ease-in;
transform-origin: 50% 50%;
animation: rotateOutNewspaper .5s both ease-in;
}
.page-contact.ng-enter {
-webkit-animation:slideInUp 0.5s both ease-in;
-moz-animation:slideInUp 0.5s both ease-in;
animation:slideInUp 0.5s both ease-in;
}
/* rotate and fall */
@-webkit-keyframes rotateFall {
0% { -webkit-transform: rotateZ(0deg); }
20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
40% { -webkit-transform: rotateZ(17deg); }
60% { -webkit-transform: rotateZ(16deg); }
100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
}
@-moz-keyframes rotateFall {
0% { -moz-transform: rotateZ(0deg); }
20% { -moz-transform: rotateZ(10deg); -moz-animation-timing-function: ease-out; }
40% { -moz-transform: rotateZ(17deg); }
60% { -moz-transform: rotateZ(16deg); }
100% { -moz-transform: translateY(100%) rotateZ(17deg); }
}
@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); }
}
/* scale up */
@keyframes scaleUp {
from { opacity: 0.3; transform: scale(0.8); }
}
@-moz-keyframes scaleUp {
from { opacity: 0.3; -moz-transform: scale(0.8); }
}
@-webkit-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); }
}
@-moz-keyframes slideInRight {
from { -moz-transform:translateX(100%); }
to { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
from { -webkit-transform:translateX(100%); }
to { -webkit-transform: translateX(0); }
}
/* slide in from the bottom */
@keyframes slideInUp {
from { transform:translateY(100%); }
to { transform: translateY(0); }
}
@-moz-keyframes slideInUp {
from { -moz-transform:translateY(100%); }
to { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideInUp {
from { -webkit-transform:translateY(100%); }
to { -webkit-transform: translateY(0); }
}
/* slide in from the bottom */
@keyframes slideOutLeft {
to { transform: translateX(-100%); }
}
@-moz-keyframes slideOutLeft {
to { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutLeft {
to { -webkit-transform: translateX(-100%); }
}
/* rotate out newspaper */
@-webkit-keyframes rotateOutNewspaper {
to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@-moz-keyframes rotateOutNewspaper {
to { -moz-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@keyframes rotateOutNewspaper {
to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
