특정 상태의 각진 애니메이션

Question

특정 상태 변화에 대해 다른 애니메이션을 만들고 싶습니다. I이를 바탕 해요 : https://scotch.io/tutorials/animating-angularjs-apps-ngview 를하고 제대로 작동하지만, 내가 이런 걸 원하는 :

• 상태가 A에서 B로 변경됩니다 - 바로
• 상태로 왼쪽에서 변경되는 슬라이드보기 C에 B -
• 상태를 오른쪽에서 왼쪽으로 슬라이드 뷰는 C로 변경된다 - 슬라이드 뷰로부터 아래로
• 그렇지 - 슬라이드 뷰에서 아래로

최대

순간에 나는 이와 같은 것을 가지고 있습니다 - 모든 견해는 오른쪽에서 왼쪽으로 움직입니다. 난 단지 .ng-leave 요소와 .ng-enter에 다음 내 응용 프로그램에서 "뒤로"버튼을 클릭 .main-app에 클래스 .back을 추가하지만 내가 제대로 (왼쪽에서 오른쪽으로) 애니메이션이되면

$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' 
       }); 
      } 
     }; 
    }]);