默认单位
如果未为期望单位的属性指定单位，例如 width，则生成的动画将使用浏览器为一组常用属性设置的默认单位：
语法比较
Anime.js
waapi.animate('.circle', {
x: 100,
y: 50,
width: 150,
height: 80,
});WAAPI equivalent
const $el = document.querySelector('.circle');
$el.animate({
translate: '100px 50px',
width: '150px',
height: '80px',
}, {
duration: 1000,
easing: 'ease-out',
}).finished.then(() => {
$el.style.translate = '100px';
});自动添加默认单位的属性
| 名称 | 默认单位 |
|---|---|
| x | 'px' |
| y | 'px' |
| z | 'px' |
| translateX | 'px' |
| translateY | 'px' |
| translateZ | 'px' |
| rotate | 'deg' |
| rotateX | 'deg' |
| rotateY | 'deg' |
| rotateZ | 'deg' |
| skew | 'deg' |
| skewX | 'deg' |
| skewY | 'deg' |
| perspective | 'px' |
| width | 'px' |
| height | 'px' |
| margin | 'px' |
| padding | 'px' |
| top | 'px' |
| right | 'px' |
| bottom | 'px' |
| left | 'px' |
| borderWidth | 'px' |
| fontSize | 'px' |
| borderRadius | 'px' |
默认单位代码示例
import { waapi } from 'animejs';
waapi.animate('.square', {
opacity: .5,
x: 250,
rotate: 45,
width: 40,
height: 40,
});<div class="small row">
<div class="square"></div>
</div>
<div class="small row">
<div class="square"></div>
</div>
<div class="small row">
<div class="square"></div>
</div>
<div class="small row">
<div class="square"></div>
</div>