多目标动画
使用 CSS 选择器定位一个或多个 DOM 元素,允许在一次 animate() 调用中对多个目标进行动画,并支持 stagger() 方法。
语法比较
Anime.js
waapi.animate('.circle', {
translate: '100px',
delay: stagger(100),
});
WAAPI equivalent
document.querySelectorAll('.circle').forEach(($el, i) => {
$el.animate({
translate: '100px',
}, {
duration: 1000,
delay: i * 100,
easing: 'ease-out',
}).finished.then(() => {
$el.style.translate = '100px';
})
});
接受
任何被 document.querySelectorAll() 接受的 String
多目标动画代码示例
import { waapi, stagger } from 'animejs';
waapi.animate('.circle', {
translate: '17rem',
delay: stagger(100),
loop: true,
alternate: true,
});
<div class="medium row">
<div class="circle"></div>
</div>
<div class="medium row">
<div class="circle"></div>
</div>
<div class="medium row">
<div class="circle"></div>
</div>