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 解决方案来保持代码更清晰。例如，您可以在这里查看

Answer 2

这是理查德解决方案的一个不那么麻烦的版本（使用 setClass 而不是超时）。

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