visibility隐藏元素仍占位且不响应事件，opacity透明化元素仍可交互且支持过渡动画；前者适合保持布局，后者适合淡入淡出效果。
用 visibility 和 opacity 控制元素显隐，核心区别在于：前者“藏形留位”，后者“透明但可点”。两者都不破坏文档流，适合需要维持布局或做过渡动画的场景。
visibility: hidden —— 隐藏但占位
元素视觉消失，仍占据原有空间，周围元素不移动；不响应鼠标事件，但屏幕阅读器默认仍能读取内容。
- 基础写法：
.hidden { visibility: hidden; }，对应恢复用visibility: visible; - 子元素可单独显示：若父元素
visibility: hidden，子元素设visibility: visible就会重新出现 - 适合场景：临时切换菜单项、表单字段的条件隐藏（保持对齐）、A/B测试中保留占位结构
- 注意：不能配合
transition做渐变动画——visibility本身不可过渡
opacity: 0 —— 透明但存在
元素完全透明，仍参与布局、仍可接收点击/悬停等事件（除非额外禁用），天然支持 CSS 过渡动画。
- 基础写法：
.fade-out { opacity: 0; transition: opacity 0.3s ease; }，恢复时设opacity: 1; - 务必搭配
pointer-events: none防误触：.fade-out { opacity: 0; pointer-events: none; }，显示时还原为pointer-events: auto; - 适合场景：淡入淡出提示框、图片轮播切换、按钮状态过渡、加载遮罩层
- 注意：敏感信息别只靠
opacity: 0隐藏——DOM 仍可查、屏幕阅读器可能读取，需加aria-hidden="true"或结合其他策略
怎么选？看需求再决定
要“彻底静默且保留空白位置” → 选 visibility；要“平滑淡出+交互控制” → 选 opacity + pointer-events。两者都比 display: none 更轻量，不触发重排，性能更友好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
