opacity动画常配visibility以实现视觉过渡与交互禁用的协同：opacity控制淡入淡出效果，visibility:hidden确保元素不可见且不可交互；因visibility不支持过渡，需用step-end或js在opacity动画结束后再切换visibility。
opacity 动画为什么常配 visibility？
单纯用 opacity 做淡入淡出，元素始终占据文档流、能响应鼠标事件（比如 hover、click），即使透明度为 0。这在切换菜单、弹窗、提示框时容易误触——用户看不见但点得着。visibility: hidden 能让元素“不可见且不可交互”，但它本身不支持过渡动画；opacity 支持平滑过渡但不影响交互性。两者组合，才能兼顾视觉动效与行为语义。
transition 触发时机与 visibility 的坑
直接给 visibility 加 transition 是无效的——CSS 规范明确指出 visibility 是离散属性，无法插值。所以必须靠 opacity 过渡，再用 JS 或伪类控制 visibility 的切换时机。常见错误是：在 opacity 动画开始前就设 visibility: hidden，导致动画直接卡死（因为元素已不可见，浏览器可能跳过渲染）。
- 正确做法：先保持
visibility: visible，仅靠opacity动画；动画结束（transitionend事件）后再设visibility: hidden - 反向操作（淡入）：先设
visibility: visible，再改opacity（此时动画立即触发） - 避免用
display: none替代visibility——它会触发重排，且无法与opacity过渡协同
纯 CSS 方案：用 :checked 或 ~ 选择器模拟状态切换
如果不需要 JS，可用 checkbox + label 模拟开关，或利用兄弟选择器配合 class 切换。核心是把 visibility 和 opacity 的变更绑定到同一状态上：
.fade-box {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0.3s step-end;
}
.fade-box.hidden {
opacity: 0;
/* 注意：step-end 让 visibility 在 opacity 动画结束瞬间生效 */
visibility: hidden;
}
这里 step-end 是关键：visibility 本身不动画，但加了 step-end 时间函数后，浏览器会在过渡结束帧才应用新值，视觉上就和 opacity 同步了。不过注意兼容性：IE 不支持 step-end，如需兼容可改用 JS 控制。
JS 配合 transitionend 更可靠
对交互要求高的场景（比如点击关闭模态框），推荐 JS 主动监听 transitionend，确保行为精准：
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && element.style.opacity === '0') {
element.style.visibility = 'hidden';
}
});
容易忽略的点：
- 必须检查
e.propertyName，因为一个元素可能有多个过渡属性（比如同时过渡opacity和transform） - 不能只监听一次就移除事件——如果元素反复切换，需要保留监听或手动清理
- 初始状态要设对：隐藏态应为
opacity: 0; visibility: hidden;，否则首次淡入会闪一下
opacity 和 visibility 的组合不是“自动生效”的魔法，而是靠时间协同与状态管理。最易出问题的地方，往往在动画结束时机和 visibility 设置顺序上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
