Question

我对角度很新，我有一些像这样的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

只需在触发手表时观看您提及的属性和addClass心跳激活

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

我假设您要闪烁的元素在范围内引用。第二件事 - 你应该为心跳类添加一些不透明度的初始值。

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

2 个答案: