指定根目录

root 是创建布局时唯一必需的参数。
它定义了布局测量的根元素，并将所有 children 查询限制为该元素的后代。
默认情况下，布局的所有子元素都会有动画效果。
你也可以通过手动定义 layout id 数据属性来针对根元素之外的元素（参见模态示例）。

接受

默认

必填

指定一个根代码示例

import { createLayout, utils } from 'animejs';

const [ $rootA, $rootB ] = utils.$('.layout-container');
const [ $buttonA, $buttonB ] = utils.$('.controls button');

const layoutA = createLayout($rootA);
const layoutB = createLayout($rootB);

function animateLayoutA() {
  layoutA.update(({ root }) => root.classList.toggle('row'));
}

function animateLayoutB() {
  layoutB.update(({ root }) => root.classList.toggle('row'));
}

$buttonA.addEventListener('click', animateLayoutA);
$buttonB.addEventListener('click', animateLayoutB);

<div class="large layout centered row">
  <div class="layout-container col grid-layout row">
    <div class="item col">A 1</div>
    <div class="item col">A 2</div>
  </div>
  <div class="layout-container col grid-layout row">
    <div class="item col">B 1</div>
    <div class="item col">B 2</div>
  </div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button">Animate A</button>
    <button class="button">Animate B</button>
  </fieldset>
</div>