visibility无动画因其值离散不可插值，须与opacity或transform配合；需在transitionend中设visibility以避免中断，移动端Safari存在渲染延迟，推荐用opacity+pointer-events+z-index替代。
为什么visibility加transition单独用没动画
因为visibility本身是离散属性：只有visible、hidden、collapse三个值，没有中间状态，transition无法插值。你设了transition: visibility 0.3s，浏览器根本不会动——它要么瞬间显示，要么瞬间消失。
visibility必须和opacity或transform搭配才有效
真正起过渡作用的是可插值的属性。常见可靠组合：
-
opacity（0 ↔ 1）：最常用，渐隐渐显，但元素仍占布局空间 -
transform: scale()或translateY()：配合visibility控制是否响应事件，避免点击穿透 - 务必把
visibility切换放在transitionend事件里，而不是和opacity同步设——否则动画未结束就隐藏，会中断视觉效果
示例关键逻辑：
modal.classList.add('is-opening');
// 动画结束后再设 visibility: hidden
modal.addEventListener('transitionend', () => {
if (!modal.classList.contains('is-active')) {
modal.style.visibility = 'hidden';
}
}, { once: true });
display: none不能参与transition，但visibility可以保留交互控制
很多人想用display实现“彻底移除”，但它一设就立刻生效，无法过渡。而visibility: hidden虽不可见，但元素还在文档流中，能继续监听transitionend，也能防止用户误点到背后内容（只要同时关掉pointer-events）。
立即学习“前端免费学习笔记（深入）”；
- 模态框打开时：
visibility: visible+opacity: 1+pointer-events: auto - 关闭动画中：
opacity: 0+transform: scale(0.95)，保持visibility: visible - 动画结束：
visibility: hidden+pointer-events: none
移动端 Safari 对visibility + transition有渲染延迟
在 iOS 15–16 的 Safari 中，如果只靠 CSS 控制visibility切换，偶尔会出现“闪一下再消失”或“动画卡住”。根本原因是渲染线程没及时收到样式更新信号。
- 临时修复：在设
visibility: hidden前加一行getComputedStyle(modal).transform强制重排 - 更稳做法：改用
opacity+pointer-events+z-index分层控制，完全避开visibility的时机敏感问题 - 别依赖
visibility做“是否渲染”的判断依据——它不等于“是否挂载”，DOM 节点依然存在且可被 JS 访问
visibility设置之间的那几十毫秒竞态。稍有偏差，用户就会看到“先淡出、再突然消失”或者“关闭后还能点到背景”。 
