Animationssequenz mit AngularJS addClass/removeClass

Question

Ich versuche eine Animationssequenz zu erstellen, indem ich Aufrufe von addClass/removeClass kombiniere.

Nach Ende der Animationsmethode wird "removeClass" aufgerufen, um die Animation zu entfernen und eine neue zu starten. Aber aus irgendeinem Grund passiert nichts. Ich versuche herauszufinden, warum es nicht funktioniert? Warum wird die Klasse nicht entfernt?

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

Vollversion finden Sie hier

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

Answer 1

Sie in diesem Hack aussehen kann ich in Ihrem Plunker gemacht: 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); 

      }); 
     }; 
    }; 
}]); 

Ich empfehle eine reine CSS-Lösung versucht, halte den Code klarer. Sie können einen Blick here zum Beispiel

Answer 2

Hier ist eine weniger hackety Version von Richards Lösung (mit setClass anstelle eines 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(); 
     }); 
    }; 
    }; 
}]);