Trình tự hoạt ảnh bằng AngularJS addClass/removeClass

Question

Tôi đang cố gắng tạo chuỗi hoạt ảnh bằng cách kết hợp các cuộc gọi đến addClass/removeClass.

Sau cuối của phương pháp hoạt hình "removeClass" được gọi là để loại bỏ các hình ảnh động và bắt đầu một cái mới. Nhưng vì lý do nào đó, không có gì xảy ra cả. Tôi đang cố gắng tìm ra lý do tại sao nó không hoạt động? Tại sao lớp học không bị loại bỏ?

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

Phiên bản đầy đủ có thể được tìm thấy ở đây

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

Answer 1

Bạn có thể nhìn vào hack này tôi đã thực hiện trong plunker của bạn: 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); 

      }); 
     }; 
    }; 
}]); 

tôi khuyên bạn nên thử một giải pháp css tinh khiết để giữ mã rõ ràng hơn. Bạn có thể xem here ví dụ:

Answer 2

Đây là phiên bản ít rắc rối hơn của giải pháp richard (sử dụng setClass thay vì hết thời gian chờ).

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