3

Angular アニメーションは初めてで、ルート ビューをアニメーションで移行する際に問題があります。

ng-route と ng-animate を使用しています。

URL（/ page1、/ page2、および/ page3）に応じてng-viewを使用してインデックスファイルに表示される、page1.html、page2.html、およびpage3.htmlの3つのビューがあるとしましょう。

現在の URL が /page1 である場合 (および page1.html が表示されている場合)、ng-enter および ng-leave を使用して CSS クラスを追加し、ページ間の遷移を適切にアニメーション化する方法を知っています。私が問題を抱えているのは、さまざまな状態でさまざまなアニメーションを処理する方法です。

たとえば、すべての CSS ルールを追加して、url /page1 を離れるときに page1 が左にスライドアウトし、url /page2 に入るときに page2 が右からスライドインするようにすると、すべてがうまくいきます。しかし、page1 -> page3 の間の遷移で、page1 を下にスライドさせ、page3 を上から下にスライドさせたい場合はどうすればよいでしょうか?

これは私が持ちたいものです：

  • page1 -> page2 (スライド左効果)
  • page2 -> page1 (右スライド効果)
  • page1 -> page3 (スライド ダウン効果)
  • page3 -> page1 (スライドアップ効果)
  • page2 -> page3 (フェードイン効果)
  • page3 -> page2 (フェードイン効果)

ご覧のとおり、私のアニメーションは、単にページが入っているか出ているかだけでなく、起点と終点の URL/ページに依存しています。これを達成する方法はありますか？

ありがとう

4

1 に答える 1

0

TL;DR: この plunkr を確認してください。http://plnkr.co/edit/sIWfBnHww9EVi9TuphTv

ngRoute 理論を使用して...

これを行う方法は、body タグに状態属性を追加することです。このためには、 $route を利用可能にする必要があります

angular.module('myapp', [])
.run(function($rootScope, $location){
  $rootScope.$route = $location;
})

.controller('MyCtrl', function($rootScope, $location){
   $rootScope.previousLocation;
   $rootScope.newLocation;
   $rootScope.$on('$routeChangeStart', function(){
     $rootScope.previousLocation = $location.path();
   })
   $rootScope.$on('$routeChangeSuccess', function(){
     $rootScope.newLocation = $location.path();
   })
})

次に、HTML で:

<body ng-controller="MyCtrl" new-location="{{ newLocation }}">

ただし、アニメーションの CSS セレクターは[new-location*="Books/view"] .ng-enter-active{}.

はるかに優れた ui.router の使用

これを少し簡単にするために、状態ui-routerを管理するために使用することをお勧めします。すべての状態に名前が付けられているため、現在の状態をアタッチできます。

angular.module('myapp', [])
.run(function($rootScope, $state){
   $rootScope.$state = $state;
})

<body state="{{ $state.current.name }}">

その場合、アニメーション化する CSS セレクターは次のようになります。

body[state="books.view"] [ui-view].ng-enter{}

申し訳ありません...それはすべて少しぎこちないです。実際の例については、plunkr を参照してください。

... このPLUNKRを見るhttp://plnkr.co/edit/sIWfBnHww9EVi9TuphTv

于 2014-10-01T12:54:15.903 に答える