angularjs - 使用 AngularJS addClass/removeClass 的动画序列

Question

我正在尝试通过组合对 addClass/removeClass 的调用来制作动画序列。

动画结束后，调用“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 中所做的这个 hack: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);

          });
      };
  };
}]);

我建议尝试纯CSS解决方案以使代码更清晰。您可以看看here例如