當變量隨Angular更改時如何閃爍

Question

我對angular非常陌生，並且有一些這樣的CSS：

.heartbeat
{
     transition:opacity 0.5s linear;
}

.heartbeat-active
{
    opacity: 1;
}

定期更新范圍內的屬性。 每當屬性更改時，如何使此過渡運行一次？

我已經看過ngAnimation和addClass，但是還無法弄清楚如何聲明式地將它們組合在一起。 如果可能的話？

Answer 1

受到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中的元素。

Answer 2

只需觀看您提到的屬性，並在觸發觀看時添加classheartbeat-active

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

我假設您要閃爍的元素在范圍內被引用。 第二件事-您應該在心跳類中添加一些不透明度的初始值。