8

私はng-animateを使用してアプリのビューをスライドさせているので、各ルートは独自のビューをスライドさせます。これは私の簡単なコードです:

html:

<div ng-view ng-animate class="slide"></div>

CSS:

/*Animations*/
.slide{
  left:0;
}
.slide.ng-enter{
  transition:0.15s linear all;
  position:fixed;
  z-index:inherit;
  left:-100%;
  height:inherit;
}
.slide.ng-leave{
  transition:0.15s linear all;
  position:fixed;
  z-index:9999;
  right:0;
}
.slide.ng-leave-active{
  transition:0.15s linear all;
  position:fixed;
  right:-100%;
  left:100%;
}
.slide.ng-enter-active{
  transition:0.15s linear all;
  left:0;
  position:relative;
}

今、私は疑問に思っています、is there anyway to exclude the home page (main "/" route) from sliding?

言い換えれば、ng-animate からルートを除外する方法はありますか?

4

7 に答える 7

1

アニメーションから特定のルートを除外する 1 つの方法は、.NET のアニメーション クラスの設定を引き継ぐ JS アニメーション ラッパーを使用することng-viewです。ng-leave非アニメーション ルートに戻る場合は、非アニメーションを処理するための追加のクラスが 1 つ必要です。

以下は、ルートのカスタムanimate属性をチェックして、ルートがアニメーション化されているかどうかを判断するサンプル JS ラッパーです。

app.animation('.slider', function($log, $route) {
  return {
    //call done when the animation is over
    enter : function(element, done) {
      if ($route.current.animate) {
        element.addClass("slide ng-enter");
      }
      done();
    },
    leave : function(element, done) {
      if ($route.current.animate) {
        element.addClass("slide ng-leave");
      } else {
        // Need to add non-animated version of ng-leave
        element.addClass("slide ng-leave-noanimation");
      }
      done();
    }
  }
});

これが作業中のプランカーです:
http://plnkr.co/edit/ldCy9Cfz2lJWNuLzDIbp?p=preview

于 2014-01-10T18:41:32.407 に答える
1

ルートの変更をリッスンし、それに応じてクラスを設定するコントローラーを作成できます。その後、CSS を使用して正しいアニメーションをターゲットにすることができます。

<body ng-controller="TranisitionCtrl" ng-class="currentRoute">
  <div ng-view ng-animate></div>
</body>

app.controller('TranisitionCtrl', function($scope) {
  $scope.$on('$routeChangeStart', function(ev, next, current) { 
    $scope.currentRoute = current.name;
  });
});

angular の最新バージョンでは、$routeChangeStart が $locationChangeStart に変更されていることに注意してください。

ここで別の同様の質問に答えましたルート変更の2つの異なるアニメーション

于 2014-01-10T16:32:17.090 に答える