root

定义一个根元素,将该作用域内的所有 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>