layui侧边栏动画事件应监听.layui-side的transitionend，因子菜单依赖display切换无法触发过渡事件；需确保css声明width过渡，且通过toggleclass控制宽度变化。
Layui 侧边栏本身不提供“菜单展开时触发动画过渡事件”的钩子，因为它的 element 模块只负责导航项的点击响应与子菜单显隐状态切换（通过 .layui-nav-itemed 类控制），并不监听或暴露 CSS transition 的开始/结束时机。所谓“菜单展开”在 Layui 中本质是 .layui-nav-child 的 display: block/none 切换，而 display 属性不可动画——因此你无法靠 transitionend 监听它。
真正能加动画、能监听过渡事件的，是整个侧边栏容器的宽度变化（即收起/展开整体面板），而不是单个子菜单的下拉动作。
✅ 正确做法：监听 .layui-side 的 transitionend 事件
当你手动控制侧边栏宽度（如从 200px → 60px）并配合 transition: width .3s ease 时，浏览器会在宽度动画完成时触发 transitionend。你可以在这个时机执行自定义逻辑：
$('.layui-side').on('transitionend', function(e) {
if (e.propertyName === 'width') {
const isCollapsed = $(this).hasClass('layui-side-collapsed');
console.log('侧边栏已' + (isCollapsed ? '收起' : '展开'));
// 在这里触发你的自定义行为，比如更新图标、上报埋点、初始化组件等
}
});
⚠️ 注意：
- 必须确保
.layui-side上已声明transition: width .3s ease（写在 CSS 文件中，不要内联）； -
e.propertyName要判断是否为'width'，避免其他属性（如padding、opacity）误触发； - 如果使用
toggleClass('layui-side-collapsed')触发宽度变化，该事件一定会被触发；但若用animate()或css({width: '60px'})（无 transition），则不会触发。
❌ 不要尝试监听子菜单的“展开动画”
-
.layui-nav-child默认靠display控制显隐，没有过渡； - 即使你强行加
max-height+transition，Layui 的element.render('nav')会重置 DOM 状态，导致 class 被清空、动画中断； -
element.on('nav')回调里操作$(elem).next('dl').show()是破坏性干预，会导致图标旋转不同步、.layui-nav-itemed类丢失。
子菜单的展开/折叠应完全交由 Layui 自动管理（靠
layui-nav-tree结构 +layui-nav-itemed类 + 内置 CSS）。你只需专注控制侧边栏整体的宽度过渡。
? 补充：如何让子菜单也有平滑下拉效果（非 Layui 原生）
如果你确实需要子菜单带下滑动画（而非瞬间显示），可绕过 display，改用 max-height + overflow：
.layui-nav-child {
max-height: 0;
overflow: hidden;
transition: max-height .25s ease, opacity .25s ease;
opacity: 0;
}
.layui-nav-itemed > .layui-nav-child {
max-height: 500px; /* 设足够大值，适配多数子项 */
opacity: 1;
}
然后在 JS 中禁止 Layui 自动切换 display，改为仅靠 class 控制：
// 在 element.on('nav') 里不操作 DOM，只加/删类
element.on('nav(side)', function(elem) {
// 让 Layui 自己处理 .layui-nav-itemed 类（它会自动加/删）
// 你无需再写 $(elem).next('dl').toggle()
});
此时可监听 .layui-nav-child 的 transitionend：
$(document).on('transitionend', '.layui-nav-child', function(e) {
if (e.propertyName === 'max-height' && $(this).is(':visible')) {
console.log('子菜单下拉动画完成');
}
});
但注意：这属于增强型定制，需自行维护兼容性，且不适用于动态渲染菜单后未初始化的情况。
侧边栏整体宽度过渡才是 Layui 下稳定可控的动画入口，子菜单动画属于额外增强，需谨慎介入底层 DOM 行为。
