0

数秒ごとに測定値が表示されます。

現在、アニメーションをいつ実行するかを決定するためにしきい値を使用しています。

<div ng-class="{'circle1': speed < 10, 'circle2': speed < 13 && speed >= 15, 'circle3': speed >= 15}"></div>

速度はすでに自動的に更新されていますが、現時点では、CSS スタイルは 13 を超えてから 15 などになったときにのみ変更されます。代わりに、速度が変化するにつれて動的に変更したいと考えています。したがって、13.1 は 13 よりも大きな円を生成し、13.2 は 13.1 よりも大きくなります。

circle1 {
    border-radius: 100px;
    height: 80px;
    width: 80px;
    left: 128px;
    position: relative;
    background: green;
}

circle1のCSSです。速度に基づいて、緑から黄色に連続的に移行したいと思います。

4

3 に答える 3

0

このようなものはどうですか？

$scope.getSpeedClass = function() {
  var klass;
  if (speed <= 15) klass = 3;
  if (speed < 13) klass = 2;
  if (speed < 10) klass = 1;

  return klass;
}

<div class="circle{{getSpeedClass()}}"></div>
于 2015-08-12T12:44:57.283 に答える
0

コントローラーのスコープに速度変数を配置して、速度が変化するたびに angular が式を再評価し、適切なクラスを適用するようにする必要があります。アレクシスが言ったように、

$scope.speed

式に基づくクラスが適用されます。

于 2015-08-12T10:10:12.747 に答える