布局 NEW
自动在两种 HTML 布局状态之间进行动画处理，使您可以轻松地动画化通常不可能或难以动画化的属性，例如 CSS display、flex 方向、grid 设置和 DOM 顺序。
示例
探索自动布局示例 CodePen 集合。
创建布局
布局实例使用主 'animejs' 入口点导出的 createLayout() 方法创建
import { createLayout } from 'animejs';
const layout = createLayout(root, parameters);或者作为独立模块从 'animejs/layout' 子路径 导入
import { createLayout } from 'animejs/layout';参数
| 名称 | 接受 |
|---|---|
| 根 | CSS 选择器 | DOM 元素 |
| 参数 (可选) | Object 的 布局设置 & 布局状态参数 |
返回
自动布局
动画化布局
布局动画的触发方式是先调用 layout.record() 和 layout.animate()，然后在更新布局之前和之后调用，或者直接调用 layout.update(cb)，并将布局更改放在回调函数中
// Toggle between list and grid view
layout.update(({ root }) => root.classList.toggle('grid'));布局代码示例
import { createLayout, utils, stagger } from 'animejs';
const layout = createLayout('.layout-container');
let i = 0;
function animateLayout() {
return layout.update(({ root }) => {
root.dataset.grid = (++i % 4) + 1;
}, {
duration: 1000,
delay: stagger(150),
onComplete: () => animateLayout()
});
}
const layoutAnimation = animateLayout();<div class="large layout centered row">
<div class="layout-container col grid-layout" data-grid="1">
<div class="item">Item A</div>
<div class="item">Item B</div>
<div class="item">Item C</div>
<div class="item">Item D</div>
</div>
</div>#layout .grid-layout {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
/* grid-1 */
#layout [data-grid="1"] .item:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
#layout [data-grid="1"] .item:nth-child(2) { grid-column: 2; grid-row: 1; }
#layout [data-grid="1"] .item:nth-child(3) { grid-column: 1; grid-row: 3; }
#layout [data-grid="1"] .item:nth-child(4) { grid-column: 2; grid-row: 2 / 4; }
#layout [data-grid="2"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
#layout [data-grid="2"] .item:nth-child(1),
#layout [data-grid="2"] .item:nth-child(4) { grid-row: 1 / 3; }
#layout [data-grid="3"] .item:nth-child(4) { grid-column: 1; grid-row: 1; }
#layout [data-grid="3"] .item:nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
#layout [data-grid="3"] .item:nth-child(2) { grid-column: 1; grid-row: 2 / 4; }
#layout [data-grid="3"] .item:nth-child(1) { grid-column: 2; grid-row: 3; }
#layout [data-grid="4"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
#layout [data-grid="4"] .item:nth-child(1) { grid-column: 1; grid-row: 1; }
#layout [data-grid="4"] .item:nth-child(2) { grid-column: 1; grid-row: 2; }
#layout [data-grid="4"] .item:nth-child(3),
#layout [data-grid="4"] .item:nth-child(4) { grid-row: 1 / 3; }
本节内容