Layui侧边栏平滑收缩需用CSS transition控制width而非display或JS动画，同步更新兄弟元素left偏移，并隐藏文字保留交互区域，避免element.render()重置状态。
要让 Layui 侧边栏收缩展开时有平滑过渡、不卡顿，核心是避开 DOM 强制重排和 JS 动画干扰，用纯 CSS 过渡控制宽度变化，并确保布局状态同步。Layui 原生不提供该动画，必须手动补全。
用 width + transition 替代 display 或 animate
卡顿最常见的原因是用了 display: none/block 或 jQuery 的 .animate()。这两者都会触发浏览器强制重排（reflow），且绕过 Layui 对 DOM 状态的跟踪，导致子菜单错位、图标旋转失效、点击区域丢失。
- ✅ 正确做法：给
.layui-side添加transition: width .3s ease（写在外部 CSS 文件中） - ✅ 收缩时只切换 class，例如
.layui-side-collapsed，并在该类中设width: 60px - ❌ 避免内联 style 写
width，也别用$('.layui-side').css('width', '60px')
同步更新主体区域偏移
侧边栏宽度变小后，.layui-body 和 .layui-footer 必须向左移动，否则会出现空白或遮挡。这个偏移不能靠 JS 计算 margin-left，而应由 CSS 控制：
- 在
.layui-side-collapsed类下，同时设置：.layui-side-collapsed ~ .layui-body, .layui-side-collapsed ~ .layui-footer { left: 60px; } - 确保 HTML 结构中
.layui-body是.layui-side的兄弟元素（标准 Layui 布局即如此） - 不要用 JS 修改
left值——容易不同步、引发抖动
收起时隐藏文字但保留交互区域
单纯缩宽会导致图标贴边、文字被裁、悬停失效。需用 CSS 精准控制视觉层：
-
.layui-side-collapsed .layui-nav-item a：设justify-content: center; text-align: center; padding: 0 15px; -
.layui-side-collapsed .layui-nav-item span：设display: none（不是visibility: hidden） -
.layui-side-collapsed .layui-nav-child：必须设display: none，防止悬停意外弹出或移动端穿透 - 图标用
<i class="layui-icon"></i>，避免混用 SVG 或字体图标造成缩放不一致
避开 element.render() 导致的状态重置
如果菜单是动态渲染的（比如从接口加载），调用 element.render('nav') 会清空你手动加的 layui-side-collapsed 类，造成“刚收起又弹开”。
- 确保折叠操作在
element.render()之后执行 - 不要在
element.on('nav')回调里调用render()，否则形成循环 - 推荐封装一个函数：
function toggleSidebar() { $('.layui-side').toggleClass('layui-side-collapsed'); }
点击按钮时只调这个，不碰 DOM 其他部分
