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