visibility不能直接过渡，因其值为离散型（visible/hidden/collapse）而无中间状态；需配合opacity和pointer-events实现视觉渐变与交互禁用。
visibility不能直接过渡，这是CSS规范决定的
直接给 visibility 加 transition 没用——浏览器根本不触发过渡动画，因为它的值是离散的（visible/hidden/collapse），没有中间状态。你看到元素“突然消失/出现”，不是过渡失败，而是它压根不支持过渡。
常见错误现象：visibility: hidden + transition: visibility 0.3s 写了也白写，切换时仍是瞬时生效。
真正能过渡的是 opacity，它有连续数值（0–1），但要注意：透明≠不可交互，opacity: 0 的元素仍响应鼠标事件、占据布局空间。
想“视觉上淡入+逻辑上禁用”，必须组合用
只靠 opacity 或只靠 visibility 都不够。要让元素真正“从无到有”：视觉上渐显、点击不响应、不占布局位置（或按需保留），就得手动配合控制。
立即学习“前端免费学习笔记（深入）”；
- 过渡开始前：设
visibility: hidden+opacity: 0+pointer-events: none - 过渡中：只对
opacity做transition，visibility在动画结束后用 JS 或伪类延迟切换（比如用transitionend事件） - 如果需要保持布局占位（比如防止页面跳动），就别动
visibility，只调opacity和pointer-events
示例关键片段：
.fade-in {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease-out;
}
.fade-in.show {
opacity: 1;
visibility: visible;
pointer-events: auto;
}注意：这里 visibility 没加过渡，靠 class 切换瞬间生效，靠 opacity 过渡撑起“出现感”。
opacity过渡卡顿？检查是否触发了重排
opacity 本应走合成层（GPU加速），但若元素有 transform: none、will-change: auto 或被父级 overflow: hidden 截断，可能退回到主线程渲染，导致掉帧。
- 确保目标元素有独立合成层：加
transform: translateZ(0)或will-change: opacity（慎用，仅在必要时） - 避免同时过渡
opacity和height/margin等触发布局的属性 - 移动端尤其明显：Safari 对
opacity合成优化较弱，可加-webkit-transform: translateZ(0)强制提升
visibility: collapse 在 table 中的行为很特殊
别在非表格元素上试 visibility: collapse —— 它对 div 等和 hidden 行为一致；但在 table-row 或 table-cell 上，它会像 display: none 那样释放空间，且部分浏览器不支持过渡（哪怕你硬加也不会动）。
使用场景极窄：只用于动态隐藏表格某行/某列，且希望其他行自动填补空隙。但它和 opacity 完全不兼容，无法组合出淡入效果。
容易踩的坑：visibility: collapse 在 Firefox 中对 table-cell 可能表现异常，Chrome 更稳定；但无论哪个浏览器，都不要指望它能过渡。
