布局 id 属性

布局 ID 会自动分配，也可以使用 data-layout-id 属性手动定义。
如果两个元素共享相同的 ID，并且其中一个被隐藏（display: none，visibility: hidden）而另一个可见，布局将自动在两者之间进行动画。
通常在希望在 DOM 的不同部分的两个元素之间创建动画时使用，而无需克隆或移动它们。

布局 id 属性代码示例

import { createLayout, utils } from 'animejs';

const [ $button ] = utils.$('.controls button');
const [ $itemA1, $itemA2 ] = utils.$('.item');

// Manually set the same layout id to both items
$itemA1.dataset.layoutId = "item-A";
$itemA2.dataset.layoutId = "item-A";

// Hide item 2
$itemA2.classList.add('is-hidden');

const layout = createLayout('.layout');

function animateLayout() {
  layout.update(({ root }) => {
    // Toggle the visibility and alternate between the two items
    $itemA1.classList.toggle('is-hidden');
    $itemA2.classList.toggle('is-hidden');
  });
}

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

<div class="large layout centered row">
  <div class="layout-container container-a col grid-layout row">
    <div class="item col">Item A</div>
  </div>
  <div class="layout-container container-b col grid-layout row">
    <div class="item col">Item A</div>
  </div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button">Toggle visibility</button>
  </fieldset>
</div>

#layout-layout-id-attribute .item.is-hidden {
  display: none;
}