opacity过渡动画闪退的根本原因是display或visibility变更强制中断动画；正确做法是仅改opacity，动画结束后再设visibility:hidden或display:none。
直接用 opacity + transition 隐藏元素，动画不触发或闪退，根本原因不是写法错，而是你动了 display 或 visibility —— 它们会强行中断过渡过程。
为什么 opacity transition 一隐藏就“瞬切”？
常见错误是 JS 里写 el.style.display = 'none'，或者 CSS 中写了 visibility: hidden 覆盖了过渡状态。浏览器看到 display 变化，立刻丢弃所有正在运行的 opacity 动画帧，视觉上就是“啪一下没了”。
- transition 只对可插值的属性生效，
display是离散值，无法渐变 -
visibility: hidden虽然能保留占位，但它本身不可动画，且一旦生效，会立即冻结当前opacity值（哪怕还没到 0） - 初始状态没设
opacity: 1（比如靠继承或默认值），浏览器无法确定“从哪开始过渡”
正确隐藏流程：只改 opacity，等动画完再收尾
核心原则：视觉变化和 DOM 占位/交互控制必须分两步，且严格按时间顺序。
- 隐藏前，确保元素有明确初始态：
opacity: 1+transition: opacity 0.25s ease-out - 触发隐藏时，仅设置
opacity: 0（通过 class 切换或el.style.opacity = '0'） - 监听
transitionend事件，在回调里设visibility: hidden或pointer-events: none；如需彻底脱离文档流，再加display: none - 若用 class 控制，推荐这样写：
.fade-out { opacity: 0; }，不要在 .fade-out 里写display或visibility
transition 参数怎么配才自然？
0.25s 是多数场景下的甜点时长：短于 0.2s 看不出淡出感，长于 0.35s 显得拖沓。timing-function 选 ease-out 而非 ease，因为淡出需要“收住”，不是匀速消失。
立即学习“前端免费学习笔记（深入）”；
- 别用
transition: all 0.25s—— 万一后续加了margin或height，会导致意外布局抖动 - 避免
linear：匀速透明变化缺乏真实感，人眼容易察觉机械感 - Safari 下偶有卡顿？加
will-change: opacity提示合成层，但别全局滥用，每个元素都加会抬高内存开销
隐藏后元素还在“捣乱”？这是最常被忽略的点
opacity: 0 的元素依然在文档流里：能响应鼠标、影响 tab 键顺序、撑开父容器高度。你以为它消失了，其实它只是“穿了隐身衣”。
- 禁用点击穿透：
pointer-events: none必须等opacity到 0 后再加，否则动画直接终止 - 释放占位空间：想让兄弟元素上移？不能只靠
opacity，得配合max-height过渡或 JS 在transitionend后设display: none - 可访问性考虑：屏幕阅读器仍会读取
opacity: 0元素，如需跳过，优先用aria-hidden="true"，而不是visibility: hidden
