正确做法是先执行opacity过渡动画，待transitionend事件触发后再设置visibility: hidden或pointer-events: none；因display和visibility不可过渡，直接设置会中断动画并导致布局异常。
因为你在用 transition 动画 opacity 的同时，又手动设置了 display: none 或 visibility: hidden —— 这两类属性本身不参与过渡，且会立刻中断动画、冻结布局状态。
transition opacity 但元素“闪退”或占位异常
常见现象是：加了 transition: opacity 0.3s，JS 里却紧接着写 el.style.display = 'none'，结果动画没播完就“啪”一下消失，DOM 占位也突然塌陷。
-
opacity是可插值属性，支持平滑过渡；display和visibility都是离散值，浏览器无法计算中间态，一设就跳变 - 一旦触发
display: none，浏览器立刻从渲染树剔除该元素，getBoundingClientRect()返回{ width: 0, height: 0 }，后续 layout 完全重算 -
visibility: hidden虽然保留占位，但它不支持 transition，且 JS 中直接赋值会覆盖正在运行的 opacity 动画样式优先级
想用 transition 隐藏又不破坏占位，必须分两步走
视觉渐隐和 DOM 占位控制不能混在同一个时机做，否则必然冲突。正确链路是：只动 opacity → 等动画结束 → 再关交互或释放占位。
- 初始 CSS 必须显式声明
opacity: 1（不能靠继承或默认值），否则浏览器无法确定过渡起点 - 隐藏触发时，仅设置
el.style.opacity = '0'或切换含opacity: 0的 class - 监听
transitionend事件，在回调里加el.style.visibility = 'hidden'（保留占位）或el.style.pointer-events = 'none'（禁交互） - 如需彻底脱离文档流（比如释放内存、避免焦点捕获），再加
el.style.display = 'none'，但务必放在transitionend之后
visibility: hidden 为什么看起来“还占位”，但 transition 不起作用？
它确实占位，但不是 bug —— visibility 在 layout 阶段已完成盒模型计算，只是 paint 阶段跳过像素绘制。正因如此，它天生不可动画。
立即学习“前端免费学习笔记（深入）”；
- 写
transition: visibility 0.3s浏览器直接忽略，等同于没写 - 父元素设
visibility: hidden，子元素设visibility: visible无效——这是强制继承，不是层叠，无法被 override - 如果目标是“渐隐+保留占位+禁交互”，更稳妥的组合是：
opacity: 0+pointer-events: none，两者都支持 transition 且行为可预测
最容易被忽略的一点：opacity 动画结束后，若只设 visibility: hidden 而不加 pointer-events: none，那个“看不见”的元素依然能响应 focus()、接收键盘 Tab，表单场景下可能造成聚焦逻辑错乱。
