标签：
一、HTML
1、引入必要的js文件，这个不多说了（注意由于之后要使用angular提供的动画效果和路由效果，所以要引入angular-animate.js和angular-route.js两个文件）
2、body内加入以下代码:
<div class="page {{pageClass}}" ng-view></div>
ng-view不多说，class通过双向绑定的方式，通过controller动态控制class中的{{pageclass}}
另外不要忘了使用模块
<html ng-app="bookStoreApp">
二、Javascript
1、app.js文件
这个是入口文件，代码如下：
var bookStoreApp = angular.module(‘bookStoreApp‘, [
‘ngRoute‘, ‘ngAnimate‘, ‘bookStoreCtrls‘, ‘bookStoreFilters‘,
‘bookStoreServices‘, ‘bookStoreDirectives‘
]);
bookStoreApp.config(function($routeProvider) {
$routeProvider.when(‘/hello‘, {
templateUrl: ‘tpls/hello.html‘,
controller: ‘HelloCtrl‘
}).when(‘/list‘, {
templateUrl: ‘tpls/bookList.html‘,
controller: ‘BookListCtrl‘
}).otherwise({
redirectTo: ‘/hello‘
})
});
首先定义了bookStoreApp模型模型，并添加依赖。之后通过config设定路由，并设定每个路由对应的控制器。
2、controller.js
用来设定控制器，代码如下：
var bookStoreCtrls = angular.module(‘bookStoreCtrls‘, []);
bookStoreCtrls.controller(‘HelloCtrl‘, [‘$scope‘,
function($scope) {
$scope.greeting = {
text: ‘Hello‘
};
$scope.pageClass="hello";
}
]);
bookStoreCtrls.controller(‘BookListCtrl‘, [‘$scope‘,
function($scope) {
$scope.pageClass="list";
}
]);
这里就通过不同控制器下对pageClass变量的设定，实现了样式的切换。
三、CSS
.page {
bottom:0;
padding-top:200px;
position:absolute;
text-align:center;
top:0;
width:100%;
}
.page h1 {
font-size:60px;
}
.page a {
margin-top:50px;
}
.hello {
background:#00D0BC;
color:#FFFFFF;
}
.list{
background:#E59400;
color:#FFFFFF;
}
@-webkit-keyframes rotateFall {
0% {
-webkit-transform: rotateZ(0deg);
}
20% {
-webkit-transform: rotateZ(10deg);
animation-timing-function: ease-out;
}
40% {
-webkit-transform: rotateZ(17deg);
}
60% {
-webkit-transform: rotateZ(16deg);
}
100% {
-webkit-transform: translateY(100%) rotateZ(17deg);
}
}
@-webkit-keyframes slideOutLeft {
to {
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes rotateOutNewspaper {
to {
-webkit-transform: translateZ(-3000px) rotateZ(360deg);
opacity: 0;
}
}
@-webkit-keyframes scaleUp {
from {
opacity: 0.3;
-webkit-transform: scale(0.8);
}
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform:translateX(100%);
}
to {
-webkit-transform: translateX(0);
}
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform:translateY(100%);
}
to {
-webkit-transform: translateY(0);
}
}
.ng-enter {
z-index: 8888;
}
.ng-leave {
z-index: 9999;
}
.hello.ng-enter {
-webkit-animation: scaleUp 0.5s both ease-in;
}
.hello.ng-leave {
-webkit-transform-origin: 0% 0%;
-webkit-animation: rotateFall 1s both ease-in;
}
.list.ng-enter {
-webkit-animation:slideInRight 0.5s both ease-in;
}
.list.ng-leave {
-webkit-animation:slideOutLeft 0.5s both ease-in;
}
这里就是基本的CSS3动画定义，没有写其他兼容，这里只针对Chrome。
angular.js提供了ng-enter和ng-leave方法，用于当元素进入、消除时执行动画效果，注意中间无空格。
这样就可以以非常精简的代码实现比较基础的动画效果了
标签：
原文地址：http://my.oschina.net/u/2445805/blog/497670
