2

私はAngularにかなり慣れていないので、次のようなcssを持っています:

.heartbeat
{
     transition:opacity 0.5s linear;
}

.heartbeat-active
{
    opacity: 1;
}

スコープのプロパティは定期的に更新されます。プロパティが変更されるたびに、このトランジションを 1 回実行するにはどうすればよいですか?

私は ngAnimation と addClass を見てきましたが、それを宣言的につなぎ合わせる方法を理解できませんでした。それが可能なら？

4

2 に答える 2

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 からの要素への参照を持つ必要はありません。

于 2013-09-27T20:01:29.727 に答える
0

言及したプロパティを監視し、監視がトリガーされたときに addClass heartbeat-active を監視するだけです

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

点滅させたい要素がスコープ内で参照されているとします。第二に、不透明度の初期値をハートビート クラスに追加する必要があります。

于 2013-09-26T08:51:40.370 に答える