用 opacity 和 visibility 联合过渡可解决视觉淡出但交互和占位问题：opacity 控制透明度，visibility 控制交互与可访问性，transition 需同时声明二者并配 step-end 时机函数。
opacity 动画生效但元素仍占位，怎么解决
只用 opacity 做过渡时，元素虽然视觉上淡出，但依然响应事件、占据文档流空间。常见表现是：鼠标悬停区域错位、下方元素无法点击、布局被“看不见的盒子”撑开。
根本原因是 opacity: 0 不影响盒模型和交互状态。必须配合 visibility 控制可访问性，再用 display 或其他方式释放空间（但 display 不能过渡）。
-
visibility: hidden让元素不可见且不响应事件，但依然占位 -
visibility: visible恢复可见和交互 - 过渡只能作用于
opacity和visibility（注意：visibility本身不支持平滑过渡，但浏览器会做“硬切换”，配合opacity的缓动就能实现视觉连贯）
transition 需要同时声明 opacity 和 visibility
如果只给 opacity 加 transition，visibility 切换是瞬时的，会导致闪一下或提前失焦。必须显式声明两者，并确保触发时机一致。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
.fade-element {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0.3s step-end;
}
关键点：
-
step-end是重点：它让visibility在过渡结束帧才切换，避免中间态出现空白或交互断层 - 不要用
linear或ease-in等缓动函数处理visibility，它只有两个值，插值无意义 - 过渡时间必须一致，否则
opacity还在动，visibility已切走，元素就“消失在半途”
隐藏时如何真正释放布局空间
visibility + opacity 解决了视觉和交互，但没解决占位问题。若需元素完全退出文档流（比如下方内容上移），得靠 JavaScript 配合 display 或 height 控制。
纯 CSS 方案有限，常见折中做法：
- 对块级容器加
overflow: hidden，再用max-height过渡（需预设最大高度） - 用
transform: scale(0)+opacity，视觉上缩为零且不占位，但语义和可访问性受损 - 最稳妥的是 JS 监听
transitionend事件，在opacity动画结束后设置display: none；显示时先设display: block，再加类触发动画
例如显示逻辑：
el.style.display = 'block';
setTimeout(() => el.classList.add('is-visible'), 10);
对应 CSS：
.is-visible { opacity: 1; visibility: visible; }
IE 和旧版 Safari 的 visibility 过渡兼容性
IE10+ 和 Safari 6.1+ 支持 visibility 的 transition 声明，但 Safari 9 及更早版本在 visibility 上应用 step-end 有 bug，可能忽略该 timing function。
兼容性兜底建议：
- 始终把
visibility的 transition 时间设为与opacity一致，哪怕不用step-end - 对老 Safari，可改用
transition: opacity 0.3s ease+ JS 控制visibility切换时机（如setTimeout延迟 1ms） - 避免依赖
visibility过渡做关键动效，核心交互降级为opacity+pointer-events: none
真正难的不是写对这两行 CSS，而是判断什么时候必须释放空间、什么时候只需禁用交互——这取决于组件在 DOM 中的位置和它的语义角色。
