侧边栏子菜单加了transition-delay仍“啪”一下弹出，因该属性不继承且display:none会阻止过渡；须用visibility+opacity+pointer-events组合，并逐级显式设置延迟。
侧边栏子菜单为什么加了 transition-delay 还是“啪”一下弹出来
因为 transition-delay 不继承，也不自动累加。你给二级菜单设了 transition-delay: 0.15s，三级菜单仍按默认 0s 启动——除非你显式写上 transition-delay: 0.3s。更关键的是，如果子菜单初始用 display: none 隐藏，那它压根没参与渲染，transition 根本不会触发。
常见错误包括：
- 只在
.submenu上统一设 delay，没区分层级 - 用
display: none / block切换，导致动画中断 - 父级
overflow: hidden裁切了子菜单，看起来像“消失”
必须用 visibility + opacity + pointer-events 替代 display
要让 transition-delay 生效，子菜单元素得始终在 DOM 中、可渲染、且具备可过渡状态。推荐组合：
-
visibility: hidden（保持布局占位） -
opacity: 0（控制视觉可见性） -
pointer-events: none（禁用交互，避免误触） - 展开时统一改为
visibility: visible; opacity: 1; pointer-events: auto
这样 hover 或 JS 切换类时，浏览器能识别属性变化，transition-delay 才真正起作用。
如何为多级菜单设置阶梯式 transition-delay
不能靠父子继承，得逐级显式定义。推荐用 CSS 变量统一管理延迟步长，避免硬编码散落：
.sidebar-menu { --delay-step: 0.12s; }
.sidebar-menu > li > .submenu { transition: opacity 0.3s ease var(--delay-step), transform 0.3s ease var(--delay-step); }
.sidebar-menu > li > .submenu > li > .submenu { transition: opacity 0.3s ease calc(var(--delay-step) * 2), transform 0.3s ease calc(var(--delay-step) * 2); }
.sidebar-menu > li > .submenu > li > .submenu > li > .submenu { transition: opacity 0.3s ease calc(var(--delay-step) * 3), transform 0.3s ease calc(var(--delay-step) * 3); }
注意点：
- 延迟值建议用
ms或保留两位小数的s（如0.15s），避免0.1s在某些浏览器里被截断成0s - 务必同时对
opacity和transform设置相同 delay，否则淡入和位移不同步 - 若用 JS 控制展开（如点击切换
data-open），确保目标元素已挂载且未被display: none移出渲染树
移动端和键盘导航下 transition-delay 容易失效
触摸设备没有 :hover，@media (hover: none) 下所有基于 hover 的延迟规则自动不生效。此时仅靠 CSS 无法维持“悬停态”，必须降级为点击逻辑。
可行做法：
- 用
:focus-within支持键盘 Tab 导航（每级<li>都要加，不能只写第一层） - JS 绑定
click或keydown（Enter/Space）触发data-open切换 - CSS 只负责样式响应：
[data-open="true"] .submenu→ 触发过渡 - 屏幕阅读器友好：保留
visibility: hidden而非display: none，确保内容可读
最易被忽略的一点：所有子菜单的 position: absolute 必须相对于带 position: relative 的直接父 <li>，而不是外层 <ul></ul>。定位上下文错位，top/left 偏移就全乱了，再调 transition-delay 也没意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
