CSS 变量 WAAPI

通过 WAAPI animate() 方法，只需使用 'var(--my-value)' 语法传递变量值，即可原生动画任何 CSS 变量。

接受

CSS 变量可与 JS animate() 方法结合使用，方法是结合基于函数的值和 utils.get()。

color: $target => utils.get($target, '--variable-name')

CSS 变量代码示例

import { waapi, animate } from 'animejs';

waapi.animate('.square',  {
  rotate: 'var(--rotation)',
  borderColor: ['var(--hex-orange)', 'var(--hex-red)' ],
});

// Helper for the JS animate() method
const cssVar = name => $el => utils.get($el, name);

animate('.square',  {
  scale: cssVar('--scale'),
  background: [cssVar('--hex-red'), cssVar('--hex-orange')],
});

<div class="medium justified row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

#animation-tween-value-types-css-variable .docs-demo-template { opacity: 0 }
#animation-tween-value-types-css-variable .square { --rotation: 360deg; --scale: 1.5; border: 10px solid currentColor }