先看效果(免费下载：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
@H_502_30@ /* 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; } }
