<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
<title>angular animation-ngView例子</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css">
<style type="text/css">
.container {
-webkit-perspective: 500;
-moz-perspective: 500;
-ms-perspective: 500;
perspective: 500;
position: relative;
}
.slide.ng-leave {
position: relative;
}
.slide.ng-enter {
position: absolute;
}
.slide.ng-enter,
.slide.ng-leave {
-webkit-transition: -webkit-transform 0.3s ease-in, opacity 0.3s ease-in;
-moz-transition: -moz-transform 0.3s ease-in, opacity 0.3s ease-in;
-o-transition: -o-transform 0.3s ease-in, opacity 0.3s ease-in;
transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}
.slide.ng-enter,
.slide.ng-leave.ng-leave-active {
-webkit-transform: scaleX(0.0001);
-o-transform: scaleX(0.0001);
transform: scaleX(0.0001);
opacity: 0;
}
.slide,
.slide.ng-enter.ng-enter-active {
-webkit-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
opacity: 1;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.3.0-beta.8/angular-animate.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
</head>
<body>
<header role="banner" id="top" class="navbar navbar-static-top navbar-inverse">
<div class="container">
<nav role="navigation" class="collapse navbar-collapse ">
<ul class="nav navbar-nav">
<li ui-sref-active="active">
<a href ui-sref="home">Home</a>
</li>
<li ui-sref-active="active">
<a href ui-sref="about">About</a>
</li>
<li ui-sref-active="active">
<a href ui-sref="contacts">Contacts</a>
</li>
</ul>
</nav>
</div>
</header>
<!--//-->
<div class="container">
<div class="slide" ui-view></div>
</div>
<!--//-->
<script type="text/javascript">
var myApp = angular.module("myApp", ["ui.router", "ngAnimate"]);
myApp.config([‘$stateProvider‘, ‘$urlRouterProvider‘,
function($stateProvider, $urlRouterProvider) {
$stateProvider.state("home", {
url: "/home",
template: "<h1>三十年功尘与土</h1>"
}).state("about", {
url: "/about",
template: "<h1>八千里路云和月</h1>"
}).state("contacts", {
url: "/contacts",
template: "<h1>莫等闲，白了少年头，空悲切</h1>"
});
$urlRouterProvider.otherwise("/home");
}
]);
</script>
</body>
</html>
时间： 2024-10-16 15:02:22