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

如何有条件地应用动画？

1 个答案: