children

确定根元素的哪些子元素必须对其位置/尺寸和指定属性进行动画化。
指定子元素的后代被视为“冻结”，仅在其父元素过渡的 50% 时处于“交换”状态。
这通常用于在不希望对在过渡期间重新排版的文本元素进行动画处理，从而导致视觉干扰时使用。
它还用于针对最初不属于布局根的子元素，但在动画阶段添加的元素，并与布局 id 数据属性结合使用。

接受

CSS selector
DOM element
NodeList or Array<DOMTargetSelector>

默认

'*'

子级代码示例

import { createLayout, utils } from 'animejs';

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

const layout = createLayout('.layout-container', {
  children: '.item',
  duration: 1000,
});

function animateLayout(swapAt) {
  layout.update(({ root }) => root.classList.toggle('row'), { swapAt });
}

const animateWithoutFade = () => animateLayout({ opacity: 1 });
const animateWithFade = () => animateLayout({ opacity: 0 });

$buttonA.addEventListener('click', animateWithoutFade);
$buttonB.addEventListener('click', animateWithFade);

<div class="large layout centered row">
  <div class="layout-container col grid-layout row">
    <div class="item col"><p>These p tags are not targeted</p></div>
    <div class="item col"><p>So they simply swap between states</p></div>
  </div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button">Animate without fade</button>
    <button class="button">Animate with fade</button>
  </fieldset>
</div>

设置
delay