子元素

指定根元素的哪些部分需要对其位置/尺寸和指定属性进行动画处理。
指定 children 的后代被认为是“冻结”的，并且仅在其父级过渡的 50% 时“交换”状态。
这主要用于您不希望动画处理包含在过渡期间重新排版的文本的元素，因为这可能会导致视觉噪声。
它还用于定位动画阶段期间最初并非布局根的一部分但随后添加的子元素，与布局 ID 数据属性结合使用。

接受

CSS 选择器
DOM 元素
NodeList 或 Array<DOMTargetSelector>

默认值

'*'

children 代码示例

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>