通过添加类，然后删除类，动画脉冲背景颜色

Question

我正在处理一个简单的动画，当一个数组发生变化时会动画出背景颜色。

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类永远不会删除。它会逐渐消失，但不会淡出。

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

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