通过AngularJS的数组序列激活一个CSS类

我有6个div，我想激活一个心跳CSS动画，但是，我想通过一个序列来做到这一点。通过AngularJS的数组序列激活一个CSS类

例如，我有一个数组：

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

数组中的每一项表示要接收心跳功能的div的位置。

每次潜水是从AngularJs UI组件：

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

我试图使用控制器通过顺序激活每个位置心跳动画。因此，在这种示例会像

位置0将花费1秒
位置3将位置0
位置5意愿的位置之后进行1秒之后进行1秒3
的位置3在位置5之后需要1秒

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

我试图用$超时做到这一点，但它同时做到了这两点。

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

来源

2017-06-27 Guilherme Felipe Reis

您可以使用CSS整个事情，角度正好设置动画/转换延迟设置订购。 – mikepa88

你想用$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

来源

2017-06-27 16:24:42

这就是我一直在寻找的确切答案。谢谢！ –

通过AngularJS的数组序列激活一个CSS类

回答

相关问题