当变量使用 Angular 更改时，如何使某些内容闪烁

How do I make something blink when a variable changes with Angular

本文关键字：何使某 闪烁 变量 Angular      更新时间：2023-09-26

我对 angular 很陌生，我有一些这样的 css：

.heartbeat
{
     transition:opacity 0.5s linear;
}
.heartbeat-active
{
    opacity: 1;
}

定期更新作用域上的属性。如何在属性更改时使此转换运行一次？

我已经看过ngAnimation和addClass，但无法弄清楚如何以声明方式将它们拼接在一起。如果这可能吗？

受到 gnom1gnoms 答案和这个线程 https://groups.google.com/forum/#!msg/angular/xZptsb-NYc4/rKAxJ3dQhbMJ 的启发，我最终做的是这样的：

app.directive('highlightOnChange', function() {
  return {
    link: function($scope, element, attrs) {
      attrs.$observe('highlightOnChange', function(val) {
        var el = $(element);
        el.removeClass('heartbeat');
        _.defer(function() {
          el.addClass('heartbeat')
        });
      });
    }
  };
});

也就是说，创建指令会观察属性。然后我可以像这样使用它：

<div highlight-on-change="{{value}}"></div>

并且不需要引用 $scope 中的元素。

只需监视您提到的属性，并在触发监视时添加 Class 检测信号活动

$scope.$watch('yourProperty', function(new, old) {
  if(new != old)
     $scope.yourElement.addClass(".heartbeat-active");
});

我假设您要闪烁的元素在范围内被引用。第二件事 - 您应该向检测信号类添加一些不透明度的初始值。

相关文章：