AngularJS_AngularJS を使用してスケーラブルなページ切り替えを実装する方法

AngularJS 1.2 では、純粋な CSS クラスベースのトランジションとアニメーションを導入することにより、単一ページ アプリケーションでのページ間のトランジションの作成が容易になります。 ng-view だけを使用して、多数の異なるトランジションを導入するスケーラブルなアプローチと、各ページがどのように出入りできるかを見てみましょう。

デモ: http://embed.plnkr.co/PqhvmW/preview

まず、タグ:

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

ng-view は Enter/Leave アニメーションを使用するため、DOM で 2 つの ng-view 要素を使用するだけで、新しいビューに切り替え、古いビューを切り替えることができます。したがって、絶対配置を使用して、相対配置を使用する page-container 要素内で ng-view を確立し、それによってあらゆる種類の配置切り替えをサポートします。

「go」メソッド

単一ページのアプリケーションでも、URL によるナビゲーションを有効にし、ブラウザーの「戻る」ボタンと「次へ」ボタンが期待どおりに動作することを確認したいと考えています。 $routeProvider でルート、テンプレート、コントローラー (オプションの解析) を設定したら、ng-click で相対パスを使用してページを直接切り替えることができます:

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

これも機能しますが、ng-view でクラス切り替えをハードコーディングする必要があります。代わりに、次のようにパスと切り替えを指定できる 'go' メソッドを $rootScope に作成しましょう:

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

これで、2 番目のパラメータとして指定したトグル クラスが ng-view に追加され、go メソッドは指定された最初のパラメータでページ パスを変更します。

クラスを切り替える

次に行うことは、任意の数のトグル クラスを作成し、ngAnimate モジュール によって提供されるフックを使用することです。例:

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