CSS 转换
CSS 的 transform 属性可以通过在参数对象中直接指定各个属性来使用 JS 和 WAAPI animate() 版本进行动画。
这允许更高程度地控制如何对单个变换属性进行动画处理，给你比 CSS 动画或原生 WAAPI 更大的灵活性。
JS animate() 方法不会解析从 CSS 样式声明中声明的 transform，transform 属性必须直接在元素的内联样式中设置。你可以使用内置的 utils.set() 函数在动画元素之前独立设置你的 transform 值，并定义它们必须设置的顺序。
为了直接动画化 transform 属性，建议使用由 WAAPI 提供支持的 waapi.animate() 方法。
只有支持 CSS.registerProperty(propertyDefinition)的浏览器， WAAPI 的个体转换才有效，否则回退到无动画模式。
有效的单个 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>