合理的默认值

默认情况下,原生 WAAPI 动画需要设置持续时间,不会应用任何缓动,更令人恼火的是,它不会持久化其最终值,需要用户在动画完成后手动设置最终样式。
Anime.js 简化了这一切,确保动画状态在动画完成后得到保留,并使用与 JS `animate()` 方法相同的默认持续时间和延迟。

语法比较

Anime.js

waapi.animate('.circle', { translate: '100px' });

WAAPI 等效

const $el = document.querySelector('.circle');

$el.animate({ translate: '100px' }, {
  duration: 1000,
  easing: 'ease-out',
}).finished.then(() => {
  $el.style.translate = '100px';
});

合理的默认值代码示例

import { waapi } from 'animejs';

waapi.animate('.circle', { translate: '16rem' });
<div class="large row">
  <div class="circle"></div>
</div>