CSS 转换
CSS transform 属性可以通过在参数对象中直接指定各个属性来动画化，JS 和 WAAPI animate() 版本均可。
这允许更精细地控制如何动画化各个转换属性，为您提供比 CSS 动画或原生 WAAPI 更大的灵活性。
JS animate() 方法不解析从 CSS 样式声明中声明的转换，并且转换属性必须直接在元素的内联样式中设置。您可以使用内置的 utils.set() 函数来独立设置您的转换值，然后再动画化元素，并定义它们必须设置的顺序。
为了直接动画化 transform 属性，建议使用 WAAPI 驱动的 waapi.animate() 方法。
使用 WAAPI 的独立转换仅适用于支持 CSS.registerProperty(propertyDefinition) 的浏览器，并回退到无动画。
有效的独立 CSS 转换属性
| 名称 | 简写 | 默认值 | 默认单位 |
|---|---|---|---|
| translateX | x | '0px' |
'px' |
| translateY | y | '0px' |
'px' |
| translateZ | z | '0px' |
'px' |
| rotate | — | '0deg' |
'deg' |
| rotateX | — | '0deg' |
'deg' |
| rotateY | — | '0deg' |
'deg' |
| rotateZ | — | '0deg' |
'deg' |
| scale | — | '1' |
— |
| scaleX | — | '1' |
— |
| scaleY | — | '1' |
— |
| scaleZ | — | '1' |
— |
| skew | — | '0deg' |
'deg' |
| skewX | — | '0deg' |
'deg' |
| skewY | — | '0deg' |
'deg' |
| perspective | — | '0px' |
'px' |
CSS 转换代码示例
import { animate, waapi } from 'animejs';
animate('.square', {
x: '15rem', // TranslateX shorthand
scale: 1.25,
skew: -45,
rotate: '1turn',
});
// the WAAPI version is recommanded if you want to animate the transform property directly
waapi.animate('.square', {
transform: 'translateX(15rem) scale(1.25) skew(-45deg) rotate(1turn)',
});<div class="medium row">
<div class="square"></div>
<span class="padded label">JS / WAAPI</span>
</div>
<div class="medium row">
<div class="square"></div>
<span class="padded label">WAAPI</span>
</div>