4

アニメーションを使用してビュー間を遷移するために ng-view を使用しています (Angular 1.2RC1)。アニメーションの方向を決定するために、場所の変更を呼び出す前に、ng-view div に slide-left または slide-right のいずれかのクラスを挿入しています。残すアニメーション (最初に実行) は機能しますが、クラスが ng-view div から削除されます。

次のように、サービスを使用して、左にスライドするか右にスライドするかを決定します。

$scope.slideView = function(index, url){ 

  if ( viewSlideIndex.getViewIndex() > index) {
    $('#slideview')
      .toggleClass("slide-left", false)
      .toggleClass("slide-right", true);
  } 
  else {
    $('#slideview')
      .toggleClass("slide-left", true)
      .toggleClass("slide-right", false);
  };
  $location.url(url);
}

ng-view div のクラスを更新します。

<button ng-click='slideView(1, "/pg1")'>Pg1</button>
<button ng-click='slideView(2, "/pg2")'>Pg2</button>
<button ng-click='slideView(3, "/pg3")'>Pg3</button>
<div id="slideView" ng-view class="slide-right"></div>

slideView (ng-view) クラスは既にキャッシュされており、完了時に更新されているように見えるので、キャッシュを更新するか、アプローチを変更する方法を知りたいですか?

助けてくれてありがとう。

http://jsfiddle.net/RoryOSiochain/BfJWf/

フィドルでslideViewにslide-leftまたはslide-rightクラスを手動で挿入するとうまくいきます。

更新:上記の Jquery の使用が問題を混乱させないことを願っています。ng-class と jQuery の両方を使用すると、同じ結果/エクスペリエンスが返されます。

4

2 に答える 2

2

この問題が発生している他のユーザーの場合:

1.2RC1 は ng-class 使用時のエンターアニメーションに問題があることが判明しました。これは 1.2RC2 で修正され、期待どおりに動作します。

ワーキングデモ

http://jsfiddle.net/RoryOSiochain/vWT2z/

更新: xpepermint の提案を使用して、Fiddle を作業バージョンで更新しました。

(ページの索引付けが完全に適用されていない場合)

これを使用する場合は、ここでフレーム インデックス値を設定します (以下では 3 にハードコードされています)。

    //
    // Set the value of the index to compare against here:
    //
    if (3 > index) {
        $scope.slideDir = 'slide-right';
    } else {
        $scope.slideDir = 'slide-left';
    };

于 2013-09-05T15:22:05.843 に答える