這篇文章主要介紹了使用AngularJS實現可伸縮的頁面切換的方法,AngularJS是一款熱門的JavaScript庫,需要的朋友可以參考下
AngularJS 1.2 通過引入基於純CSS class的切換和動畫,在一個單頁面應用創建頁面到頁面的切換變得更加的容易。只需要使用一個ng-view,讓我們來看一下,一個引入眾多的不同切換的可伸縮方法,以及指定的每個頁面如何切入和切出。
演示: http://embed.plnkr.co/PqhvmW/preview
首先,標記:
?
1
2
3
<div class="page-container">
<div ng-view class="page-view" ng-class="pageAnimationClass"> </div>
</div>
既然ng-view使用進入/離開動畫,那麼就能簡單地在DOM裡使用兩個 ng-view 元素來進行新視圖切入和舊視圖切出。因此,我們在使用相對定位的 page-container 元素裡,使用絕對定位建立了ng-view,從而支持任意一種定位切換。
'go' 方法
在單頁面應用裡,我們仍想啟用通過URL導航和確保浏覽器的回退和下一步按鈕如預期的功能。所以一旦我們在$routeProvider設好我們的路由,模板,控制器(可選的解析),我們可以在一個 ng-click 裡使用一個相對路徑來直接切換頁面:
?
1
<a ng-click="/page2">Go to page 2</a>
那樣也可以工作,但是我們需要在ng-view 硬編碼指定切換一個class 。以此代替,讓我們在 $rootScope 上創建一個 'go' 方法,可以讓我們指定一個路徑和一個像這樣的切換:
?
1
<a ng-click="go('/page2', 'slideLeft')">Go to page 2</a>
這是我們 $rootScope 'go' 方法:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$rootScope.go = function (path, pageAnimationClass) {
if (typeof(pageAnimationClass) === 'undefined') { // Use a default, your choice
$rootScope.pageAnimationClass = 'crossFade';
}
else { // Use the specified animation
$rootScope.pageAnimationClass = pageAnimationClass;
}
if (path === 'back') { // Allow a 'back' keyword to go to previous page
$window.history.back();
}
else { // Go to the specified path
$location.path(path);
}
};
現在,任何你第二個參數指定的 切換類 將會添加到 ng-view 並且 go 方法將會用指定的第一個參數改變頁面路徑。
切換類
接下來要做的就是創建一個任意數量的切換類,並使用 ngAnimate module 提供的鉤子,例如:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* slideLeft */
.slideLeft {
transition-timing-function: ease;
transition-duration: 250ms;
}
.slideLeft.ng-enter {
transition-property: none;
transform: translate3d(100%,0,0);
}
.slideLeft.ng-enter.ng-enter-active {
transition-property: all;
transform: translate3d(0,0,0);
}
.slideLeft.ng-leave {
transition-property: all;
transform: translate3d(0,0,0);
}
.slideLeft.ng-leave.ng-leave-active {
transition-property: all;
transform: translate3d(-100%,0,0);
}