如何有条件地应用动画？

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)我可以在动画的时候把它们做成1个接一个吗？

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

如何有条件地应用动画？

How to apply animation conditionally?

angularjs

animate.css