angularjs頁面切換動畫(ui-view)
阿新 • • 發佈：2019-01-03
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="angular.js"></script>
<script src="angular-ui-router.js"></script>
<script src="angular-animate.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', ['ui.router', 'ngAnimate']);
app.config(function($stateProvider) {
$stateProvider
// home page
.state('home', {
url: '/',
templateUrl: 'page-home.html',
controller: 'mainController'
})
// about page
.state('about', {
url: '/about',
templateUrl: 'page-about.html',
controller: 'aboutController'
})
// contact page
.state('contact', {
url: '/contact',
templateUrl: 'page-contact.html',
controller: 'contactController'
});
});
app.controller('mainController', function($scope) {
$scope.pageClass = 'page-home';
});
// about page controller
app.controller('aboutController', function($scope) {
$scope.pageClass = 'page-about';
});
// contact page controller
app.controller('contactController', function($scope) {
$scope.pageClass = 'page-contact';
});
</script>
<style type="text/css">
body {
background:#00D0BC; color:#00907c;
}
.page-home {
background:#00D0BC; color:#00907c;
}
.page-about {
background:#E59400; color:#a55400;
}
.page-contact {
background:#ffa6bb; color:#9e0000;
}
.page {
margin-top: 20px;
padding-top: 100px;
text-align:center;
position: relative;
height: 500px;
width:100%;
}
.page h1 {
font-size:60px;
}
.page a {
margin-top:50px;
}
/* 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="myapp">
<ul class="nav nav-list">
<li><a ui-sref="home" class="btn btn-primary btn-lg">Home</a></li>
<li><a ui-sref="about" class="btn btn-success btn-lg">About</a></li>
<li><a ui-sref="contact" class="btn btn-danger btn-lg">Contact</a></li>
</ul>
<div class="page {{ pageClass }}" ui-view></div>
</body>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="angular.js"></script>
<script src="angular-ui-router.js"></script>
<script src="angular-animate.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', ['ui.router', 'ngAnimate']);
app.config(function($stateProvider) {
$stateProvider
// home page
.state('home', {
url: '/',
templateUrl: 'page-home.html',
controller: 'mainController'
})
// about page
.state('about', {
url: '/about',
templateUrl: 'page-about.html',
controller: 'aboutController'
})
// contact page
.state('contact', {
url: '/contact',
templateUrl: 'page-contact.html',
controller: 'contactController'
});
});
app.controller('mainController', function($scope) {
$scope.pageClass = 'page-home';
});
// about page controller
app.controller('aboutController', function($scope) {
$scope.pageClass = 'page-about';
});
// contact page controller
app.controller('contactController', function($scope) {
$scope.pageClass = 'page-contact';
});
</script>
<style type="text/css">
body {
background:#00D0BC; color:#00907c;
}
.page-home {
background:#00D0BC; color:#00907c;
}
.page-about {
background:#E59400; color:#a55400;
}
.page-contact {
background:#ffa6bb; color:#9e0000;
}
.page {
margin-top: 20px;
padding-top: 100px;
text-align:center;
position: relative;
height: 500px;
width:100%;
}
.page h1 {
font-size:60px;
}
.page a {
margin-top:50px;
}
/* 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="myapp">
<ul class="nav nav-list">
<li><a ui-sref="home" class="btn btn-primary btn-lg">Home</a></li>
<li><a ui-sref="about" class="btn btn-success btn-lg">About</a></li>
<li><a ui-sref="contact" class="btn btn-danger btn-lg">Contact</a></li>
</ul>
<div class="page {{ pageClass }}" ui-view></div>
</body>
</html>
page-home.html
<h1>Angular Animations</h1>
<h2>Home</h2>
page-contact.html
<h1>Tons of Animations</h1>
<h2>Contact</h2>
page-about.html
<h1>Animating Pages Is Fun</h1>
<h2>About</h2>