Question

我每隔几秒钟就有一个读数。

目前我正在使用阈值来确定动画应该发生的时间：

<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。我希望它能根据速度不断从绿色变为黄色。

Answer 1

您可以在自己的控制器

中定义自己的速度

$scope.speed

并尝试影响您对此变量的持续时间。

对于更改，样式会动态尝试在您的标记中定义样式：

<div class='circle' style='width:{{speed}}px;'></div>

Answer 2

您应该将速度变量放在控制器的范围内，这样每当速度发生变化时，angular将重新评估表达式并应用适当的类。正如亚历克西斯所说，使用

$scope.speed

将应用

和基于表达式的类。

Answer 3

这样的事情怎么样？

$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>

使用Angular基于计算应用CSS

3 个答案: