angularjs - 如何有条件地应用动画？

Question

在 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)我可以让它们在动画时一个接一个吗？

Answer 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