Sekwencja animacji przy użyciu metody AngularJS addClass/removeClass

Question

Próbuję utworzyć sekwencję animacji, łącząc wywołania metody addClass/removeClass.

Po zakończeniu metody animacji wywoływana jest metoda "removeClass" w celu usunięcia animacji i uruchomienia nowej. Ale z jakiegoś powodu nic się nie dzieje. Próbuję dowiedzieć się, dlaczego to nie działa? Dlaczego klasa nie została usunięta?

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

Pełna wersja można znaleźć tutaj

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

Answer 1

Można spojrzeć na ten siekać zrobiłem w swoim plunker: 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); 

      }); 
     }; 
    }; 
}]); 

Polecam spróbować czystego rozwiązanie css utrzymuj kod jaśniejszy. Możesz spojrzeć na here na przykład

Answer 2

Oto mniej hackety wersja rozwiązania Richarda (przy użyciu setClass zamiast timeout).

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