Sequenza di animazione usando AngularJS addClass/removeClass

Question

Sto provando a creare una sequenza di animazione combinando le chiamate ad addClass/removeClass.

Al termine del metodo di animazione "removeClass" viene chiamato per rimuovere l'animazione e avviarne una nuova. Ma per qualche ragione, non succede niente. Sto cercando di capire perché non funziona? Perché la lezione non viene rimossa?

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

versione completa può essere trovato qui

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

Answer 1

Potete guardare questo hack che ho fatto nella tua 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); 

      }); 
     }; 
    }; 
}]); 

Vi consiglio di provare una soluzione CSS puro mantieni il codice più chiaro. Puoi dare un'occhiata a here per esempio

Answer 2

Ecco una versione meno pesante della soluzione di richard (usando setClass invece di un 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(); 
     }); 
    }; 
    }; 
}]);