使用 AngularJS addClass/removeClass 的动画序列答案

【问题标题】：Animation sequence using AngularJS addClass/removeClass使用 AngularJS addClass/removeClass 的动画序列
【发布时间】：2014-12-03 13:54:43
【问题描述】：

我正在尝试通过组合对 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

【问题讨论】：

标签： angularjs animate.css angularjs-animation

【解决方案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例如

【讨论】：

感谢您的推荐，我认为这是一个很好的做法
它适用于同样的问题，一个问题，你为什么将 $apply 调用放在计时器中？它肯定有效，如果我在没有计时器的情况下执行 $apply，所有动画都会中断并且不起作用，我认为 $digest 的调用会发疯，但在计时器内没有......为什么：-O
回想起来，您应该改用$timeout。 setTimeout 超出角度（因此角度不会检测到变化）并应用将其重新带回
如果你使用 $timeout，你就不需要 $apply。
setTimeout 运行较晚，所以它不会被 angular 检测到，这就是我使用 $apply 的原因

【解决方案2】：

这是 Richard 解决方案的一个不那么麻烦的版本（使用 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();
        }); 
    };
  };
}]);

【讨论】：

您的意思是您使用的是“then”承诺，而不是“setTimeout”。 "setClass 是 $angular 的一个函数，你在 "then" 承诺完成后调用它。