hidden属性使元素脱离渲染树，导致transition完全不触发；应改用visibility: hidden与opacity配合CSS类控制过渡，并注意焦点与可访问性管理。
hidden属性导致transition完全不触发，因为元素被移出渲染树
HTML 的 hidden 属性等价于 display: none，浏览器在布局阶段就将其排除在渲染树之外。这意味着：任何基于样式的过渡（transition）或动画（animation）都不会启动——不是“卡住”，是压根没注册。哪怕你写了 transition: opacity 0.3s，只要元素带 hidden，JS 改完 element.hidden = false 后，它会直接跳到终态，毫无过渡。
- 用
getBoundingClientRect()检查，返回值全是0，说明它确实不在渲染流程中 -
transition对hidden本身无效，CSS 不定义hidden → visible的中间状态 - 即使后续用 JS 补
element.style.opacity = 1，也不会自动补上过渡，因为起始帧已丢失
改用 visibility: hidden + opacity 配合类名控制
真正可过渡的方案是把可见性逻辑交给 CSS，而不是 HTML 属性。核心是：让元素始终在渲染树中，仅控制是否绘制和是否透明。
- 初始状态设为
visibility: hidden; opacity: 0;（保尺寸、占位、可过渡） - 定义过渡规则：
transition: opacity 0.25s ease, visibility 0.25s（注意：visibility 过渡只有显隐两个离散值，视觉变化靠 opacity） - 用 JS 分两步触发：
el.style.visibility = 'visible';→el.classList.add('is-fade-in');（顺序不能反） - 避免写
visibility: hidden; transition: opacity 0.3s;—— visibility 锁定会导致 opacity 过渡被压制，第一帧不可见
如果必须用 hidden 属性，得手动重置动画状态
极少数场景（如 SSR 渲染需保留 hidden 语义），只能靠 JS 强行干预动画生命周期。这不是优雅解法，但能兜底。
- 先移除
hidden：element.hidden = false - 强制重排以确立起始样式：
element.offsetHeight（读取布局触发重排） - 再设置目标样式并加动画类：
element.style.opacity = '1'; element.classList.add('animate'); - 若用
animation，需配合animation-play-state: paused初始声明，再切回running，但时机难控，容易漏帧
真正容易被忽略的细节：hidden 和 focus/interact 的冲突
即使你修复了过渡，hidden 元素仍无法获得焦点、不响应 pointer events、不参与 tab 顺序——这些行为不会因加了 transition 就改变。如果你的动效依赖键盘操作（比如按 Enter 触发展开），光解决视觉过渡不够，还得同步管理 tabindex、aria-hidden 和 inert 状态。否则用户可能“看到动效”，却点不到、Tab 不进去、屏幕阅读器读不到。
立即学习“前端免费学习笔记（深入）”；
