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

Question

我有 6 个 div，我想激活心跳 CSS 动画，但是，我想按顺序执行。

例如我有一个数组:

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

数组中的每一项表示将接收心跳函数的div的位置。

每个 dive 都是来自 AngularJs 的 UI 组件:

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

我正在尝试使用 Controller 按顺序在每个位置激活心跳动画。 所以在那个例子中会像

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

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

我尝试用 $timeout 来做到这一点，但它会同时执行这两个操作。

https://codepen.io/guifeliper/pen/pwdKKj

Answer 1

您想使用 $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-class 指令:

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

https://codepen.io/jdoyle/pen/xrPJwW