visibility不支持transition，与opacity混用时因突变破坏合成层或触发重排导致闪烁；正确做法是用opacity控制渐变、visibility控制渲染参与，且需配合transform等强制硬件加速。
visibility 本身不触发 transition，但和 opacity 混用时闪烁，根本原因是 visibility 切换瞬间破坏了合成层稳定性，或触发了重排。
visibility 不支持过渡，但常被误以为能“配合”opacity
浏览器对 visibility 的处理是离散的：值只有 visible 和 hidden，没有中间态，因此 transition: visibility 0.3s 完全无效。很多“闪烁”其实是 visibility: hidden 在某帧突然生效，把正在过渡的 opacity 强制中断，导致视觉跳变。
- ✅ 正确做法：用
visibility控制“是否参与渲染”，用opacity控制“是否可见”，二者分工明确 - ❌ 错误写法：
.box { visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }→visibility那部分声明被忽略，但切换时仍会突变 - 若在 JS 中同步设置
element.style.visibility = 'hidden'，哪怕只比opacity晚几毫秒，也大概率打断过渡流程
为什么加了 opacity 还闪？检查 visibility 切换时机
常见错误是把 visibility: visible/hidden 写在和 opacity 同一状态里，导致两者同时生效——而 visibility 的突变会覆盖 opacity 的渐变过程。
- ✅ 推荐写法：
.box { opacity: 0; visibility: hidden; transition: opacity 0.25s ease; }+.box.show { opacity: 1; visibility: visible; } - ⚠️ 更稳妥的延迟控制：
transition: opacity 0.25s ease, visibility 0s 0.25s;—— 让visibility在opacity过渡完再切换，避免首帧空白或末帧突现 - 注意：
visibility 0s 0.25s中的0s是持续时间，0.25s是延迟；不能写成visibility 0.25s，否则无效
移动端 Safari 特别容易闪，因为图层复用太保守
iOS Safari（尤其是 15.2 之前）对合成层管理极严格。哪怕你只改 opacity，只要 visibility 变了，WebKit 就可能销毁当前图层、重建新图层，造成白闪或文字抖动。
- 必须给动的元素本身加
transform: translateZ(0)或backface-visibility: hidden，且顺序不能错：transform: translateZ(0); backface-visibility: hidden; - 不要加在父容器上——
backface-visibility不继承，加了也白加 - 慎用
will-change: opacity：iOS 有内存泄漏风险，临时交互可用，但务必监听transitionend后立刻移除
JS 切换 class 时读取 offsetHeight 会强制同步渲染
如果在切换 .show 类前后，JS 读取了 offsetHeight、getComputedStyle 等布局信息，浏览器会立即刷新样式并重排，直接打断 opacity 过渡。
- 避免模式：
el.classList.add('show'); console.log(el.offsetHeight); - 安全做法：用
Promise.resolve().then(() => {...})或requestAnimationFrame(() => {...})把读取操作推到下一帧 - 更简单：干脆别读——多数场景下，
transitionend事件已足够判断动画完成
最易被忽略的一点：父容器若有 overflow: hidden，而子元素靠 visibility + opacity 显隐，Safari 可能因裁剪边界重算导致局部闪动；此时需给父容器也加 transform: translateZ(0) 锁定其合成层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
