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

Question

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

笨蛋: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 类永远不会被删除。它淡入淡出，但不会淡出。

Answer 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

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