update()

一键助手，运行 record()，执行你的 DOM 变更，并用可选覆盖调用 animate()。

这在某些框架中可能不起作用（我没有测试过所有框架）。
如果动画在使用 .update() 时不起作用，请使用手动 record() / .animate() 组合。

参数

A callback Function to update the layout
An optional Object of animation parameters to override default layout timing and easing for this specific transition.

时间轴

update() 代码示例

import { createLayout, utils } from 'animejs';

const [ $button ] = utils.$('.controls button');

const layout = createLayout('.layout-container');

function animateLayout() {
  // Triggers both layout.record() and layout.animate()
  layout.update(() => {
    const first = layout.root.firstElementChild;
    if (first) layout.root.append(first);  
  }, {
    duration: 750,
    ease: 'out(4)',  
  });
}

$button.addEventListener('click', animateLayout);

<div class="large layout centered row">
  <div class="layout-container col grid-layout row">
    <div class="item col">Item 1</div>
    <div class="item col">Item 2</div>
    <div class="item col">Item 3</div>
  </div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button">update()</button>
  </fieldset>
</div>

Anime.js | JavaScript Animation Engine

update()

参数

返回

update() 代码示例