then() V4
返回一个 Promise
,当动画完成时,该 Promise 会解决并执行回调。
then()
方法可以这样直接内联使用
animate(target, {x: 100, duration: 500}).then(callback);
或在 async
/ await
上下文中使用
async function waitForAnimationToComplete() {
return animate(target, {
x: 100,
duration: 500,
});
}
const asyncAnimation = await waitForAnimationToComplete();
参数
名称 | 类型 |
---|---|
回调函数 | 一个 Function ,其第一个参数是动画本身 |
返回
Promise
then() 代码示例
import { animate } from 'animejs';
const [ $value ] = utils.$('.value');
const animation = animate('.circle', {
x: '16rem',
delay: 500,
});
animation.then(() => $value.textContent = 'fulfilled');
<div class="large row">
<div class="circle"></div>
<pre class="large log row">
<span class="label">promise status</span>
<span class="value">pending</span>
</pre>
</div>