状态参数
定义在特定过渡阶段应用于元素的属性:进入布局、离开布局或交换位置。
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,并可选择性地覆盖 delay、duration 和 ease。
在调用 layout.update() 或 layout.animate() 后,相应的元素数组将在布局实例上可用
| 数组 | 包含 |
|---|---|
layout.entering |
出现在布局中的元素 |
layout.leaving |
从布局中消失的元素 |
layout.swapping |
过渡期间未动画的子元素 |
这些数组在每次调用 .animate() 时都会被清除并重新填充。
本节内容