布局插件
Layout 插件负责管理布局变化期间的 CSS 过渡动画，并在应用加载完成时发出信号。
行为
Layout 插件自动执行两项关键任务：
-
暂停过渡动画 —— 在窗口大小调整期间，侧边栏、导航栏和内容区域的 CSS 过渡动画会被暂时禁用，以防止视觉闪烁。在此期间，
hold-transition类会被添加到<body>上。 -
应用加载完成信号 —— 在 DOMContentLoaded 事件触发后延迟 400ms，
app-loaded类会被添加到<body>上。在 CSS 中使用此类可将动画延迟到应用准备就绪之后，从而防止初始页面加载时的闪烁。
CSS 类
| 类名 | 描述 |
|---|---|
hold-transition |
暂时禁用布局元素上的 CSS 过渡动画。在窗口大小调整时应用。 |
app-loaded |
在初始布局准备就绪后添加到 <body> 上。用于进场动画。
|
在 CSS 中的用法
/* 在应用加载完成前隐藏侧边栏过渡效果 */
body:not(.app-loaded) .app-sidebar {
transition: none !important;
}
/* 仅在应用加载后才动画化 */
body.app-loaded .app-sidebar {
transition: width 0.3s ease;
}调用方式
Layout 插件在
DOMContentLoaded
时自动初始化——无需手动绑定。唯一公开的方法适用于高级场景，当您希望在自己操作
DOM 变更时抑制过渡动画：
import { Layout } from "admin-lte"
const layout = new Layout(document.body)
layout.holdTransition(200) // 禁用过渡效果 200 毫秒
// ... 执行某些操作，否则这些操作会产生生硬的动画
document.body.classList.toggle("sidebar-mini")方法
| 方法 | 返回值 | 描述 |
|---|---|---|
holdTransition(time?) |
void |
在 <body> 上添加 hold-transition，在
time 毫秒后移除（默认
100）。用于在程序化布局更改期间抑制 CSS 过渡动画。
|
注意事项
hold-transition类会在超时后自动移除。您无需手动清理。- 没有 data 属性 —— 该插件不读取任何配置，在页面加载时以 body 元素进行初始化。
-
如果您需要检测初始页面加载动画何时完成，请监听
<body>上的app-loaded类，或监听标准的load事件。