delay
定义所有动画布局动画的默认延迟(以毫秒为单位)。
与 stagger() 实用函数兼容。
接受
Number- Function based value that returns a
Numberequal to or greater than0
默认
0
延迟代码示例
import { createLayout, utils, stagger } from 'animejs';
const [ $buttonA, $buttonB ] = utils.$('.controls button');
const layout = createLayout('.layout-container', {
delay: 500 // Delays the transition by 500ms
});
function animateLayout(delay) {
// You can override the layout delay in the update() method too
layout.update(({ root }) => root.classList.toggle('row'), { delay });
}
const animateWith500MsDelay = () => animateLayout();
const animateWithStaggerDelay = () => animateLayout(stagger(150));
$buttonA.addEventListener('click', animateWith500MsDelay);
$buttonB.addEventListener('click', animateWithStaggerDelay);
<div class="large layout centered row">
<div class="layout-container col grid-layout row">
<div class="item col">Item 1</div>
<div class="item col">Item 2</div>
<div class="item col">Item 3</div>
</div>
</div>
<div class="medium row">
<fieldset class="controls">
<button class="button">500 ms delay</button>
<button class="button">Staggered delay</button>
</fieldset>
</div>