使用ngRoute和ngAnimate配合使用，可以實現頁面切換的效果。
如果有使用過swiper，就知道這個效果是怎麼樣的。
程式碼：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/angular.js/1.3.0/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0/angular-route.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0/angular-animate.js"></script>
<style>
body{
margin:0;
padding:0;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
} #p01{
width: 100%;
height: 100%;
background: red;
}
#p02{
width: 100%;
height: 100%;
background: green;
}
#p03{
width: 100%;
height: 100%;
background: blue;
}
#p04{
width: 100%;
height: 100%;
background: pink;
}
#p05{
width: 100%;
height: 100%;
background: skyblue;
}
/*以下的ngAniamte外掛的關鍵，因為它靠css來實現動畫，
可以不編寫js程式碼；
流程：
為動畫的容器新增選擇器：如.container
然後再這個選擇器上實現動畫
.ng-enter出現時的樣式->>
(它們之間動畫效果，需要自己去編寫如新增過渡效果transition，在選擇器上編寫)
->>.ng-enter-active出現後的樣式
.ng-leave離開時的樣式-->>.ng-leave-active離開後的樣式
這裡ng-show無效
ng-if會移除dom，生成dom，而ng-show只是改變其display屬性。
display來實現顯示隱藏，在渲染過程中會對動畫效果無效化
而它和ng-view，就無需新增這個指令，因為這個頁面的切換也是動態刪除和新增
*/
.container{
width: 100%;
height: 100%;
transition: 1s all;
position: absolute;
overflow: hidden;
}
.container.ng-enter{
left: 100%;
}
.container.ng-enter-active{
left:0%;
}
.container.ng-leave{
left: 0%;
}
.container.ng-leave-active{
left: -100%;
}
</style>
<script>
window.onload=function(){
document.body.style.width=view().w+"px";
document.body.style.height=view().h+"px";
}
// 全屏可視區的寬高
function view(){
return {w:document.documentElement.clientWidth,
h:document.documentElement.clientHeight};
}
</script>
</head>
<body>
<div ng-controller="myCon" class="wrap">
<!-- 使用錨點實現路徑變換，雜湊值 -->
<a href="#shouye">首頁</a>
<a href="#ziyemian01">子頁面01</a>
<a href="#ziyemian02">子頁面02</a>
<a href="#ziyemian03">子頁面03</a>
<a href="#ziyemian04">子頁面04</a>
<!-- ng-view配合ngRoute一起使用，實現單頁面效果 -->
<div class="container" ng-view ></div>
</div>
<script>
// 依賴注入外掛ngAnimate,ngRoute
var myApp=angular.module("myApp",["ngAnimate","ngRoute"])
// 在配置中規定路由規則
.config(['$routeProvider',function($routeProvider){ $routeProvider
.when('/shouye',{
template : '<p id="p01">首頁的內容</p>'
})
// 路由路徑
.when('/ziyemian01',{
template : '<p id="p02">子頁面01</p>'
})
// 路由路徑
.when('/ziyemian02',{
template : '<p id="p03">子頁面02</p>'
})
// 路由路徑
.when('/ziyemian03',{
template : '<p id="p04">子頁面03</p>'
})
// 路由路徑
.when('/ziyemian04',{
template : '<p id="p05">子頁面04</p>'
})
// 重定向路徑，就是預設路徑
.otherwise({
redirectTo : '/shouye'
}); }])
.controller("myCon",["$scope",function($scope){ }])
</script>
</body>
</html>
ngRoute方面的使用：傳送門
ngAnimate和ng-repeat配合：
程式碼：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/angular.js/1.3.0/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0/angular-animate.js"></script>
<style>
.listBox{
transition: all 1s;
}
.listBox.ng-enter{
opacity: 0;
}
.listBox.ng-enter-active{
opacity: 1;
}
.listBox.ng-leave{
display: none;
}
/*對所有元素同時應用，可能實際運用中需要有一個先後的漸變出現的效果，這時候可以設定ng-enter-stagger來實現.
*/
.listBox.ng-enter-stagger{
animation-delay:100ms;
}
</style>
</head>
<body>
<div ng-controller="myCon">
<!-- ng-keyup事件指令 -->
<input type="text" ng-model="text" ng-keyup="change(text)">
<ul>
<li class="listBox" ng-repeat="k in dataArr">{{k}}</li>
</ul>
</div>
<script>
var myApp=angular.module("myApp",["ngAnimate"])
.controller("myCon",["$scope","$http",function($scope,$http){
$scope.change=function(val){
// $http和JQ裡的$.ajax()工具使用方式類似
$http({
// 跨域請求方式
method:"JSONP",
// 百度搜索,資料介面
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=JSON_CALLBACK"
// 成功接受資料，第一個引數是資料（json格式）
// 這個函式可以接受四個引數，具體檢視手冊
}).success(function(data){
$scope.dataArr=data.s;
});
}
}])
</script>
</body>
</html>
ngAnimate簡單的使用方式：
程式碼：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angularjs-v1.5.9.js"></script>
<script src="ngAnimate.js"></script>
<style>
.box{
width:100px;
height:100px;
background: red;
transition: 1s all;
}
.box.ng-enter{
opacity: 0;
}
.box.ng-enter-active{
opacity: 1;
}
.box.ng-leave{
opacity: 1;
}
.box.ng-leave-active{
opacity: 0;
}
</style>
</head>
<body>
<div ng-controller="myCon">
<!-- ng-model在複選框裡使用時true，false值 -->
<input type="checkBox" ng-model="bTure">
<!-- 這裡ng-show無效 -->
<!-- ng-if會移除dom，生成dom，而ng-show只是改變其display屬性。 -->
<!-- display來實現顯示隱藏，在渲染過程中會對動畫效果無效化 -->
<div ng-if="bTure" class="box">{{bTure}}</div>
</div>
<script>
var myApp=angular.module("myApp",["ngAnimate"])
.controller("myCon",["$scope",function($scope){
$scope.bTure=true;
}])
</script>
</body>
</html>
其實這些都是簡單的方式去使用外掛，但由於他們配合起來使用就變複雜了一些。