AngularJS 1.2 通過引入基于純CSS class的切換和動畫，在一個單頁面應用創建頁面到頁面的切換變得更加的容易。只需要使用一個ng-view，讓我們來看一下，一個引入眾多的不同切換的可伸縮方法，以及指定的每個頁面如何切入和切出。
演示: http://embed.plnkr.co/PqhvmW/preview
首先，標記：
<div class="page-container"> <div ng-view class="page-view" ng-class="pageAnimationClass"> </div> </div>
'go' 方法
在單頁面應用里，我們仍想啟用通過URL導航和確保瀏覽器的回退和下一步按鈕如預期的功能。所以一旦我們在$routeProvider設好我們的路由，模板，控制器（可選的解析），我們可以在一個 ng-click 里使用一個相對路徑來直接切換頁面：
<a ng-click="/page2">Go to page 2</a>
那樣也可以工作，但是我們需要在ng-view 硬編碼指定切換一個class 。以此代替，讓我們在 $rootScope 上創建一個 'go' 方法，可以讓我們指定一個路徑和一個像這樣的切換：
<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); }};現在，任何你第二個參數指定的 切換類 將會添加到 ng-view 并且 go 方法將會用指定的第一個參數改變頁面路徑。
切換類
接下來要做的就是創建一個任意數量的切換類，并使用 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);}新聞熱點
疑難解答
