CSS 变量 V4 JS

具有数值或颜色值的 CSS 变量可以通过将变量名作为字符串直接传递给动画参数来进行动画处理。
这种方法还支持对伪元素（如 ::after 和 ::before）上定义的属性进行动画处理，这些属性在其他情况下无法通过 JavaScript 访问。

为了使用 WAAPI 驱动的 waapi.animate() 方法来动画 CSS 变量属性，您需要使用 CSS.registerProperty(propertyDefinition)，否则将回退到无动画。

CSS 变量代码示例

import { animate, utils } from 'animejs';

// Set the CSS variables as properties on the animated elements
utils.set('.square', {
  '--radius': '4px',
  '--x': '0rem',
  '--pseudo-el-after-scale': '1', // applied to the pseudo element "::after"
  borderRadius: 'var(--radius)',
  translateX: 'var(--x)',
});

// Animate the values of the CSS variables
animate('.square', {
  '--radius': '20px',
  '--x': '16.5rem',
  '--pseudo-el-after-scale': '1.55' // Animates the ":after" pseudo element of the element
});

<div class="medium row">
  <div class="css-variables square"></div>
</div>
<div class="medium row">
  <div class="css-variables square"></div>
</div>
<div class="medium row">
  <div class="css-variables square"></div>
</div>