在ui-view 上使用,突出頁面切換的效果,比較簡單css
html,css樣式也寫在裏面html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="jslibs/bootstrap-3.3.5-dist/css/bootstrap.min.css"> <script src="jslibs/angular-1.2.29/angular.min.js"></script> <script src="jslibs/angular-1.2.29/angular-animate.min.js"></script> <script src="jslibs/angular-1.2.29/angular-route.min.js"></script> <style type="text/css"> /* 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 { position:absolute; text-align:center; 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; } </style> </head> <body ng-app="animateApp"> <div class="page {{ pageClass }}" ng-view></div> </body> </html> <script> var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']); 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'; }); </script>
<!-- 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>
<!-- 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>
頁面切換有簡單的效果,仍是不錯的java