visibility切换时元素仍占布局空间，opacity不会触发重排但会拦截事件；正确做法是先用opacity过渡动画，再通过transitionend事件设置visibility:hidden以彻底隐藏并释放交互。
visibility切换时元素仍占布局空间，opacity不会
直接说结论：visibility: hidden 只是让元素“不可见但还在”，opacity: 0 是“透明但依然响应事件、参与渲染流程”。两者叠加用，不是为了“更隐藏”，而是为了解决过渡动画中布局跳变或交互残留的问题。
常见错误现象：只用 opacity 做淡出，动画结束后元素还挡着下面的按钮；只用 visibility，又没法做渐变效果。
-
visibility切换不触发重排（layout），但会触发重绘（paint） -
opacity动画能被 GPU 加速（尤其在 transform 同时存在时），而visibility不能动画 - 必须先设
opacity: 0，再等过渡结束才设visibility: hidden，否则动画根本不会发生
transition需要同时监听opacity和visibility变化
css 的 transition 不会自动监听 visibility 变化——它压根不支持该属性的过渡。所以你写 transition: visibility 0.3s, opacity 0.3s，visibility 那部分完全无效。
正确做法是只对 opacity 做过渡，再用 JavaScript 或 transitionend 事件补上 visibility 的切换时机。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 方案：用
opacity过渡 +transition-delay配合visibility的延迟生效（但不可靠，受渲染帧影响） - 推荐 js 控制：监听
transitionend，检查Event.PropertyName === 'opacity'，再设visibility: hidden - 别忘了反向恢复时也要处理：先
visibility: visible，再opacity: 1，否则初始帧就不可见
opacity=0时仍会拦截pointer事件，visibility=hidden则不会
这是最容易踩的坑：以为 opacity: 0 就等于“消失”，结果鼠标点不到底下的按钮，或者 focus 被挡住。
原因很实在：opacity 不影响事件捕获流，只是视觉透明；visibility: hidden 才真正让元素退出交互路径。
- 如果要彻底禁用交互，必须组合使用：
opacity: 0; visibility: hidden; pointer-events: none; - 但
pointer-events: none本身不支持过渡，所以它得和opacity分开控制——通常在动画开始前就加上，结束时移除 - 注意 safari 对
pointer-events在opacity: 0元素上的兼容性略差，建议加will-change: opacity提前提示渲染层
用will-change和transform提升opacity动画性能
opacity 动画本身轻量，但若父容器有复杂阴影、滤镜或大量子元素，掉帧很常见。这时候光调 transition-timing-function 没用。
关键不是“怎么写得更顺”，而是“让浏览器提前知道你要动什么”。
- 给动画元素加
will-change: opacity，告诉浏览器准备合成层（但别滥用，会增加内存开销） - 更稳妥的做法是搭配
transform: translateZ(0)或transform: scale(1)强制硬件加速 - 避免同时过渡
opacity和height/width：后者触发布局计算，会拖慢整个动画帧 - 移动端尤其注意：ios Safari 对非 transform/opacity 的过渡非常敏感，哪怕只是
margin也会卡顿
事情说清了就结束。真正难的不是写对那两行 CSS，而是判断什么时候该切 visibility、什么时候该关 pointer-events、以及 transitionend 里到底该监听哪个 property —— 浏览器不会报错，但用户就是点不中。