transition 在父元素 display: none 时完全不触发，因子元素被彻底移出渲染树，样式计算与过渡均被跳过；应改用 visibility + opacity 配合 transition 延迟控制，并在 transitionend 中检查 opacity 后补 display: none。
transition 在父元素 display: none 时完全不触发，不是卡顿，是浏览器直接跳过整个过渡流程。
父元素 display: none 会彻底移除子元素渲染树节点
只要父元素设了 display: none，它的所有子元素都会从渲染树中被剥离——连样式计算都停止，更别说 transition。哪怕子元素自己写了 transition: opacity 0.3s，也毫无意义。
- 常见错误现象：
opacity动画在父级显示/隐藏切换时“啪”一下消失，毫无渐变 - DevTools 的 Computed 面板里根本看不到子元素的
transition规则，它已被浏览器静默丢弃 - 用 JS 同步设置
parent.style.display = 'block'再改子元素opacity，浏览器仍会合并重绘，起始帧丢失
替代方案：用 visibility + opacity 控制父子显隐节奏
父容器不能用 display: none，但可以用 visibility: hidden 暂时“屏蔽”整块区域，同时保留子元素在渲染树中的存在感。
- 父元素初始态：
visibility: hidden; opacity: 0; transition: opacity 0.25s ease, visibility 0s 0.25s; - 显示时加 class：
visibility: visible; opacity: 1; transition: opacity 0.25s ease, visibility 0s; - 这样子元素的
opacity过渡能正常启动，且不会因父级突变而中断 - 注意：如果父容器有
overflow: hidden，visibility: hidden仍可能撑开滚动条，动画结束后需 JS 补display: none
必须用 display: none？那就靠 JS 强制触发布局
当框架或遗留逻辑强制依赖 display 控制显隐，又无法改父级样式时，只能用 JS 打断浏览器的批量优化。
立即学习“前端免费学习笔记（深入）”；
- 三步操作缺一不可：
parent.style.display = 'block';→ 读取parent.offsetHeight（不能换getComputedStyle）→ 再操作子元素动画 - 这个
offsetHeight读取会强制同步重排，让浏览器“看到”父元素已就位，子元素才能拿到正确的起始状态 - 慎用于高频场景（如滚动中反复展开），否则引发卡顿
真正容易被忽略的是：DOM 卸载时机与动画完成的错位
即使你用 visibility + opacity 实现了淡出，只要没在 transitionend 事件里检查 event.propertyName === 'opacity' 并补上 display: none，元素就一直占着文档流、影响布局、拖慢重排，甚至干扰屏幕阅读器。
