opacity 小于 1（如 0.99）才触发合成层，opacity: 1 不生效；父级 filter/clip-path 会压制子元素图层；will-change 需动画前 JS 动态设置才有效。
opacity 动画本身能触发合成层，但实际不生效，往往不是 opacity 的问题，而是被其他样式或上下文“压制”了。
opacity 小于 1 才会创建新图层，opacity: 1 不行
浏览器只在元素存在“视觉差异”时才主动提升图层。opacity 为 1 是默认状态，不构成合成条件；而 opacity: 0.99、opacity: 0.5 等任意小于 1 的值，都会强制创建独立图层。
- ✅ 正确：
opacity: 0.99（哪怕只是临时设一下，动画开始前加，结束后可恢复） - ❌ 错误：
opacity: 1+ 过渡到opacity: 0—— 起始态未升层，首帧仍走主线程 - ⚠️ 注意：某些旧版 Safari 对
opacity: 0.999都不敏感，建议用0.99或0.95
父容器的 filter、clip-path 或非 identity transform 会压制子元素图层
即使子元素写了 opacity 动画，只要它在一个开启了 filter: blur(2px) 或 clip-path: circle() 的父容器里，浏览器就会把整个子树合并进同一图层渲染，GPU 加速失效。
- 检查 DevTools → Layers 面板，看动画元素是否真的出现在独立图层中
- 临时移除父级
filter或clip-path，观察动画是否变流畅——是的话，就确认是这个原因 - 替代方案：把需要 filter 的内容抽成伪元素，或用
backdrop-filter（仅作用于背景）避开影响
will-change: opacity 不一定立刻生效，且可能被忽略
will-change 不是开关，而是提示；浏览器只在“即将变化前几帧”内响应它。如果页面加载时就全局写死 will-change: opacity，多数浏览器会直接忽略。
- ✅ 推荐做法：动画触发前 JS 动态添加，例如：
el.style.willChange = 'opacity'，动画结束监听transitionend后设回'auto' - ❌ 避免：
div { will-change: opacity; }全局声明——既无效，又可能引发层爆炸 - ⚠️ 注意：
will-change: opacity单独使用效果弱；搭配transform: translateZ(0)或transform: scale(1)更可靠
真正卡住的点，常不在 opacity 本身，而在图层是否“干净”：有没有父级压制、起始态是否满足升层条件、will-change 是否在对的时间点出现。DevTools 的 Layers 面板不是装饰，是唯一能验证图层是否真实分离的工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
