AngularJS 1.2 通過(guò)引入基于純CSS class的切換和動(dòng)畫，在一個(gè)單頁(yè)面應(yīng)用創(chuàng)建頁(yè)面到頁(yè)面的切換變得更加的容易。只需要使用一個(gè)ng-view，讓我們來(lái)看一下，一個(gè)引入眾多的不同切換的可伸縮方法，以及指定的每個(gè)頁(yè)面如何切入和切出。

演示: http://embed.plnkr.co/PqhvmW/preview

首先，標(biāo)記：

 <div class="page-container">
  <div ng-view class="page-view" ng-class="pageAnimationClass"> </div>
 </div>

既然ng-view使用進(jìn)入/離開(kāi)動(dòng)畫，那么就能簡(jiǎn)單地在DOM里使用兩個(gè) ng-view 元素來(lái)進(jìn)行新視圖切入和舊視圖切出。因此，我們?cè)谑褂孟鄬?duì)定位的 page-container 元素里，使用絕對(duì)定位建立了ng-view，從而支持任意一種定位切換。

'go' 方法

在單頁(yè)面應(yīng)用里，我們?nèi)韵雴⒂猛ㄟ^(guò)URL導(dǎo)航和確保瀏覽器的回退和下一步按鈕如預(yù)期的功能。所以一旦我們?cè)?routeProvider設(shè)好我們的路由，模板，控制器（可選的解析），我們可以在一個(gè) ng-click 里使用一個(gè)相對(duì)路徑來(lái)直接切換頁(yè)面：

 <a ng-click="/page2">Go to page 2</a>

那樣也可以工作，但是我們需要在ng-view 硬編碼指定切換一個(gè)class 。以此代替，讓我們?cè)?$rootScope 上創(chuàng)建一個(gè) 'go' 方法，可以讓我們指定一個(gè)路徑和一個(gè)像這樣的切換：

 <a ng-click="go('/page2', 'slideLeft')">Go to page 2</a>

這是我們 $rootScope 'go' 方法：

$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);
  }
};

現(xiàn)在，任何你第二個(gè)參數(shù)指定的切換類將會(huì)添加到 ng-view 并且 go 方法將會(huì)用指定的第一個(gè)參數(shù)改變頁(yè)面路徑。

切換類

接下來(lái)要做的就是創(chuàng)建一個(gè)任意數(shù)量的切換類，并使用 ngAnimate module 提供的鉤子，例如：

/* 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);
}

您可能感興趣的文章: