AngularJS addClass/removeClass kullanarak animasyon dizisi

Question

Çağrıları addClass/removeClass ile birleştirerek bir animasyon dizisi oluşturmaya çalışıyorum.

Animasyonun sona ermesinden sonra, animasyonu kaldırmak ve yeni bir tane başlatmak için "removeClass" çağrılır. Ama bir sebepten ötürü hiçbir şey olmaz. Neden işe yaramadığını anlamaya çalışıyorum? Neden dersler kaldırılmıyor?

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

Tam sürüm burada bulunabilir

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

Answer 1

Ben senin plunker yapılan bu kesmek bakabilirsiniz: Ben bir saf css çözümü denemenizi öneririz 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); 

      }); 
     }; 
    }; 
}]); 

kodu daha açık tutun. here bir göz atabilirsiniz örneğin

Answer 2

İşte richard'ın çözümünün daha az kesinlikli bir sürümü (bir zaman aşımı yerine setClass kullanılarak). Size öneri için

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