通过添加类，然后删除类来 ng-animate 脉冲背景颜色答案

【问题标题】：ng-animate pulse background color by adding class, then removing class通过添加类，然后删除类来 ng-animate 脉冲背景颜色
【发布时间】：2014-12-14 08:36:09
【问题描述】：

我正在制作一个简单的动画，它会在数组更改时使背景颜色产生脉冲。

Plunker：http://plnkr.co/edit/27K6B6vHa4ayuPbgRSP3?p=preview

我的指令：

app.directive('animateOnChange', ['$animate', function($animate) {
  return function(scope, elem, attr) {
    scope.$watchCollection(attr.animateOnChange, function() {
      $animate.addClass(elem, 'on').then(function() {
        $animate.removeClass(elem, 'on');
      });
    });
  };
}]);

似乎addClass 和removeClass 同时运行，而on 类从未被移除。它淡入淡出，但不会淡出。

【问题讨论】：

标签： angularjs ng-animate

【解决方案1】：

将其包装在 $timeout 回调中以强制执行两个不同的摘要：

app.directive('animateOnChange', ['$animate', '$timeout', function($animate, $timeout) {
  return function(scope, elem, attr) {
    scope.$watchCollection(attr.animateOnChange, function() {
      console.log('items changed');
      $animate.addClass(elem, 'on').then(function() {
        $timeout(function(){
          $animate.removeClass(elem, 'on');
        }, 0);
      });
    });
  };
}]);

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

有更多的方法可以做到这一点，但这个可能是最简单的。

【讨论】：

太棒了。完美运行。