set()

立即将一个或多个属性值设置到一个或多个目标上。

const setter = utils.set(targets, properties);

参数

名称	接受	描述
targets	Targets	目标元素
properties	`Object`	目标的有效属性和值的对象

动画

utils.set() 对于设置复杂的值非常有用，但对于在相同目标上反复更新相同属性的情况，建议使用 Animatable 以获得更好的性能。

utils.set() 如果你尝试在 DOM 或 SVG 元素上设置尚未定义的属性，它将不起作用。

set() 代码示例

import { utils, stagger } from 'animejs';

const [ $set, $revert ] = utils.$('button');
const squares = utils.$('.square');
const colors = ['red', 'orange', 'yellow'];

let setter;

const setStyles = () => {
  setter = utils.set(squares, {
    borderRadius: '50%',
    y: () => utils.random(-1, 1) + 'rem',
    scale: stagger(.1, { start: .25, ease: 'out' }),
    color: () => `var(--hex-${utils.randomPick(colors)})`
  });
  $set.setAttribute('disabled', 'true');
  $revert.removeAttribute('disabled');
}

const revertStyles = () => {
  setter.revert();
  $set.removeAttribute('disabled');
  $revert.setAttribute('disabled', 'true');
}

$set.addEventListener('click', setStyles);
$revert.addEventListener('click', revertStyles);

<div class="large 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>
<div class="medium row">
  <fieldset class="controls">
    <button>Set styles</button>
    <button disabled>Revert styles</button>
  </fieldset>
</div>

Anime.js | JavaScript Animation Engine

set()

参数

返回

set() 代码示例