javascript - 子要素の AngularJS animate は 1 回目は機能し、2 回目は失敗します

Question

ここで、角度のあるアニメーションで奇妙な問題が発生しています。画面の「深さ」に応じて画面間を遷移し、方向を変えるアニメーションを行っています。

注意が必要なのは、静的部分と可動部分の 2 つの部分があることです。そのため、このように実装しています。1 回目は正しく動作し、2 回目は正しく動作しないことがわかります。ng-enter は移行をうまく行いません。

ここでプランカーを見ることができます：

http://plnkr.co/edit/OC4rqA?p=info

Answer 1

私はこの問題をいじってみましたが、この問題はltrとrtlクラスの設定に関連している疑いがあります$routeChangeStart。クラス補間の前に ngView アニメーションが作動するように見える$routeChangeStartため、アニメーションの進行中にすでに$routeChangeStartクラスが変更され、すべての混乱が発生します。

ltrコントローラーメソッド内に移動してrtl変更した実際の例があります$scope.goTo。理想的には、これを別のサービスに移動する必要があります。また、CSS を少し更新しました。

.controller('NewCtrl', function ($scope, $location, $rootScope, $route) {
  $scope.goTo = function (route) {
    var next = $route.routes[route];
    $rootScope.viewDirection = 'ltr';
    if ($route.current && next && ($route.current.depth > next.depth)) {
      $rootScope.viewDirection = 'rtl';
    }
    $location.path(route);
  }
});

デモ: http://plnkr.co/edit/oNcOpoXv8lHtYZETpkCe?p=info