如何有条件地应用动画？答案

【问题标题】：How to apply animation conditionally?如何有条件地应用动画？
【发布时间】：2015-01-19 11:49:46
【问题描述】：

在 angularjs 中，在指令内：

我有这个 animate.css 动画数组：

['fadeIn','BounceInLeft'...]

我有以下html：

<div ng-repeat="opt in quest.opts" ng-show="showBtns" class="animated" ng-class='getRandomClass()'>

1) 我该如何做这样的事情，所以在每次 ng-repeat 中，列表中的一个新动画将应用于该 div？

2）我可以让它们在动画时一个接一个吗？

【问题讨论】：

标签： angularjs animate.css

【解决方案1】：

使用 $index 获取实际的动画字符串：

var animateArray = ['fadeIn', 'BounceInLeft', ... ]
<div ng-repeat="opt in quest.opts" ... class="animateArray[$index]" ...

这将按顺序应用每个动画。如果数组长度为 7，您可以使用模数使其回到开头：

var animateArray = ['fadeIn', 'BounceInLeft', ... ]
<div ng-repeat="opt in quest.opts" ... class="animateArray[$index % 7]" ...  // repeats after 7th element

如果你想让它随机化，那么在每次循环运行时生成一个不超过数组长度的随机数：

var randomInt(max) {
    return Math.floor(Math.random() * max);
}
var animateArray = ['fadeIn', 'BounceInLeft', ... ]
<div ng-repeat="opt in quest.opts" ... class="animateArray[randomInt(7)]" ...  // repeats after 7th element

【讨论】：

当我的意思是一个接一个，我的意思是完成一个动画，然后做另一个......对不起，如果我不是那么清楚
这更棘手。您需要知道最后一个动画何时结束，或者动画持续了多长时间。 $animate 提供了一个函数 .then 让你在一个动画结束时触发一些事情。对很多人来说，这很难