CSS过渡的可见性切换_visibility与opacity的组合使用技巧

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 也会卡顿