Question

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

动画方法结束后＃34; removeClass＆＃34;被调用以删除动画并开始一个新动画。但由于某种原因，没有任何反应。我试图弄清楚它为什么不起作用？为什么不删除课程？

$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

你可以看看我在你的掠夺者所做的这个黑客攻击：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例如

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

使用AngularJS addClass / removeClass的动画序列

2 个答案: