定义一个根元素,将该作用域内的所有 DOM 查询限制在指定的 HTMLElement 的后代元素中。这对于在 React 应用程序等基于组件的架构中创建自包含的动画环境特别有用。

接受

根代码示例

import { createScope, animate } from 'animejs';

createScope({ root: '.row:nth-child(2)' })
.add(() => {
  animate('.square', {
    x: '17rem',
    loop: true,
    alternate: true
  });
});
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">outside scope</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">inside scope</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">outside scope</div>
</div>