Angularjs 路由

来源：互联网发布：手机测距软件编辑：程序博客网时间：2024/04/30 18:50

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

1 0