update()

一个便捷的辅助函数，它会运行 record()，执行你的 DOM 变动，并调用 animate()，可以进行可选的覆盖。

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

参数

一个回调 Function 用于更新布局
一个可选的 Object，用于覆盖此特定过渡的默认布局时间设置和缓动效果。

时间轴

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 动画引擎

update()

参数

返回

update() 代码示例