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>