iterations
iterations 参数已被 loop 参数取代，它决定动画重复的次数，而不是总迭代次数。
iterations |
loop |
效果 |
|---|---|---|
1 |
0 |
不重复 |
3 |
2 |
重复两次 |
Infinity |
Infinity | true | -1 |
无限重复 |
语法比较
Anime.js
waapi.animate('.square', {
x: 100,
loop: 3
});WAAPI equivalent
const targets = document.querySelectorAll('.square');
targets.forEach(($el, i) => {
$el.animate({
translate: '100px',
}, {
fill: 'forwards',
duration: 1000,
iterations: 4
})
});接受
- A
Number[0, Infinity] - A
Booleanwheretrueis equivalent toInfinityandfalsedoesn't loop
迭代代码示例
import { waapi, stagger } from 'animejs';
waapi.animate('.square', {
translate: '17rem',
loop: 3,
alternate: true,
delay: stagger(100)
});<div class="medium row">
<div class="square"></div>
</div>
<div class="medium row">
<div class="square"></div>
</div>
<div class="medium row">
<div class="square"></div>
</div>