特定の状態の角度アニメーション

Question

特定の状態の変化に対して異なるアニメーションを作成したい。 Iこれに基づいてよ： https://scotch.io/tutorials/animating-angularjs-apps-ngview をし、それが正常に動作しますが、私はこのような何かしたい：

• 状態がAからBに変更された - 右
• 状態に左からから変更されたスライドビューをCにB - そうでなければダウン
• までからスライドビュー - -
• 状態を右から左へスライドビューはにCから変更さ
アップ

までからスライドビューを

現時点で私はこのようなものを持っています - すべてのビューは右から左に移動します。私は.main-appにその後、私のアプリで「戻る」ボタンをクリックすると、クラス.backを追加しましたが、その後、私は唯一の.ng-leave要素の（左から右へ）適切なアニメーションを持っており、.ng-enter（右から左へ）いつものように同じアニメーションを持っている

$animateTime: .5s; 
.main-app.ng-enter { position: absolute; top: 0; left: 0; animation: slideInRight $animateTime both ease-in; } 
.main-app.ng-leave { position: absolute; top: 0; left: 0; animation: slideOutLeft $animateTime both ease-in; } 

.main-app.ng-enter.back { position: absolute; top: 0; left: 0; animation: slideInLeft $animateTime both ease-in; } 
.main-app.ng-leave.back { position: absolute; top: 0; left: 0; animation: slideOutRight $animateTime both ease-in; } 

私はこのような何か試してみました：

$rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) { 
    if(from.name == 'A' && to.name == 'B') { 
     $('.main-app').addClass('animation-from-top-to-bottom'); 
    } 
}); 

をしかし、私が望むように、このスクリプトではまだ唯一.ng-leave要素が働き、.ng-enterは、デフォルトのアニメーションを持っています。

Answer 1

私はこれでそれを達成： https://docs.angularjs.org/api/ngAnimate/service/ $ animateCss

私はこのコード

$rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) { 
    $rootScope.$previousState.state = from; 
    $rootScope.$previousState.stateParams = fromParams; 
}); 

で以前の状態を保存し、これはアニメーションを使用すべきかを決定するコードです

angular.module('app').animation('.main-app', ['$animateCss', '$rootScope', '$state', 
    function ($animateCss, $rootScope, $state) { 
     var duration = '.25s'; 

     return { 
      enter: function (element, doneFn) { 
       var from = $rootScope.$previousState.state; 
       var to = $state.current; 

       var animationName; 

       if (from.name === 'A' && to.name === 'B') { 
        animationName = 'fadeIn'; 
       } else { 
        animationName = 'zoomIn'; 
       } 

       return $animateCss(element, { 
        keyframeStyle: duration + ' ' + animationName + ' linear' 
       }); 
      }, 
      leave: function (element, doneFn) { 
       var from = $rootScope.$previousState.state; 
       var to = $state.current; 

       var animationName; 

       if (from.name === 'A' && to.name === 'B') { 
        animationName = 'fadeOut'; 
       } else { 
        animationName = 'zoomOut'; 
       } 

       return $animateCss(element, { 
        keyframeStyle: duration + ' ' + animationName + ' linear' 
       }); 
      } 
     }; 
    }]);