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>