Javascript 使用AngularJS通过数组序列激活CSS类

我有6个div，我想激活一个心跳CSS动画，但是，我想通过一个序列来实现

例如，我有一个数组：

self.generatedSequence = [0,3,5,3]; 

数组中的每个项表示将接收heartbeat函数的div的位置

每个潜水都是AngularJs的UI组件：

<div class="grid-cell"
    ng-class="{'heartbeat': $ctrl.isActive
    }"
></div>

我正在尝试使用控制器通过一个序列在每个位置激活心跳动画。 所以在这个例子中

• 位置0需要1s
• 位置3将在位置0后1s
• 位置5将在位置3之后1s
• 位置3将在位置5之后1s

所以所有的动画都需要4s

我尝试使用$timeout来实现这一点，但它同时实现了这两个功能

---

您想使用

$interval

，而不是

$timeout

，因为

$timeout

只运行一次

$ctrl.stopInterval = $interval(function () {
  $ctrl.heartbeatId = $ctrl.generatedSequence.shift();

  // be sure to clean up afterwards
  if($ctrl.generatedSequence.length == 0) {
    $interval.cancel($ctrl.stopInterval);
  }

}, 1000);

并更改网格单元

ng类

指令，如下所示：

<div class="grid-cell" ng-repeat="grid in $ctrl.gridBox"
    ng-class="{'heartbeat': $ctrl.heartbeatId == grid }"></div>

---

你可以使用css来处理整个事情，而angular只是用来设置动画/过渡延迟来设置顺序。这正是我想要的答案。非常感谢。