布局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';参数
| 名称 | 接受 |
|---|---|
| root | CSS selector | DOM element |
| parameters (opt) | Object of Layout settings & Layout states parameters |
返回
自动布局
为布局制作动画
布局动画可以通过在更新布局之前和之后调用 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; }
在本节