AngularJS addClass/removeClass

Question

का उपयोग करके एनीमेशन अनुक्रम मैं addClass/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 में किए गए देख सकते हैं: 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

यहां रिचर्ड के समाधान का एक कम हैकटी संस्करण है (टाइमआउट के बजाय सेटक्लास का उपयोग करके)।

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