状态参数

定义在特定过渡阶段应用于元素的属性:进入布局、离开布局或交换位置。

import { createLayout } from 'animejs';

createLayout('.layout-container', {
  children: '.item',
  duration: 350,
  delay: 0,
  ease: 'inOut(3.5)',
  properties: ['boxShadow'],
┌─────────────────────────────┐
│ enterFrom: { opacity: 0 },  │
│ leaveTo: { opacity: 0 },    ├─ State Parameters
│ swapAt: { opacity: 0 },     │
└─────────────────────────────┘
  onBegin: () => {},
  onUpdate: () => {},
  onComplete: () => {},
}).then(() => {});

每个参数接受一个包含 CSS 属性的 Object,并可选择性地覆盖 delaydurationease

在调用 layout.update()layout.animate() 后,相应的元素数组将在布局实例上可用

数组 包含
layout.entering 出现在布局中的元素
layout.leaving 从布局中消失的元素
layout.swapping 过渡期间未动画的子元素

这些数组在每次调用 .animate() 时都会被清除并重新填充。