AngularJS를 사용하는 애니메이션 시퀀스 addClass/removeClass

Question

addClass/removeClass에 대한 호출을 결합하여 애니메이션 시퀀스를 만들려고합니다.

애니메이션 메서드가 끝나면 "removeClass"가 호출되어 애니메이션이 제거되고 새 애니메이션이 시작됩니다. 그러나 어떤 이유로 든 아무 일도 일어나지 않습니다. 왜 작동하지 않는지 알아 내려고하는 중입니까? 왜 수업이 삭제되지 않습니까?

$animate.addClass(element, 'fadeInDown').then(function() { 
    $animate.removeClass(element, 'fadeInDown'); // why is it not working? 
    $animate.addClass(element, 'fadeOutDown'); 
}); 

전체 버전은 여기에서 찾을 수 있습니다

http://plnkr.co/edit/EFybfU4jcZoT3S7jCpM8?p=preview

Answer 1

당신은 내가 당신의 plunker에서 만들어진이 해킹 볼 수 있습니다 : I가 순수 CSS의 솔루션을 시도하는 것이 좋습니다 http://plnkr.co/edit/iMMdPUrIz132PsCtB2Uq?p=preview

var myApp = angular.module('myApp', ['ngAnimate']); 

myApp.controller('Controller', function($scope) {}); 

myApp.directive('animated', ['$animate', '$window', function($animate, $window) { 
    return function(scope, element, attrs) { 
     scope.animate = function() { 
      $animate.addClass(element, 'fadeInDown').then(function() { 
       $animate.removeClass(element, 'fadeInDown'); // why is it not working? 

       setTimeout(function() { 
        scope.$apply(function() { 
         $animate.addClass(element, 'fadeOutDown'); 
        }); 
       }, 0); 

      }); 
     }; 
    }; 
}]); 

코드를 명확하게 유지하십시오. 당신이 볼 수 있습니다 here 예를 들어

Answer 2

리차드의 솔루션은 덜 익숙한 버전입니다 (타임 아웃 대신 setClass 사용). 당신의 추천에 대한

http://plnkr.co/edit/lIfPq2acHUu9Va6gou05?p=preview

var myApp = angular.module('myApp', ['ngAnimate']); 

myApp.controller('Controller', function ($scope) { 
}); 

myApp.directive('animated', ['$animate', '$window', function ($animate, $window) { 
    return function (scope, element, attrs) { 
    scope.animate = function() { 
     $animate.addClass(element, 'fadeInDown') 
     .then(function() { 
      $animate.setClass(element, 'fadeOutDown', 'fadeInDown'); 
      scope.$digest(); 
     }); 
    }; 
    }; 
}]);