opacity变化需配合transition才产生过渡效果，必须写在基础选择器中；避免用all、禁混用display:none；推荐transition:opacity 0.3s ease，并结合visibility或JavaScript控制以确保行为正确。
opacity 变化必须配合 transition 才能产生过渡效果
单独设置 opacity 不会触发任何动画，它只是一个静态值。要让透明度变化“动起来”，必须显式声明 transition 属性，且目标属性名必须写成 opacity（不能简写为 all 除非你确定其他属性不需要控制）。
-
transition: opacity 0.3s ease;是最安全、最推荐的写法 - 避免用
transition: all 0.3s;—— 它会让所有可动画属性（比如width、background-color）都响应变化，容易引发意外重绘或性能抖动 - 如果元素初始
opacity: 0;，记得同时设置visibility: hidden;或用pointer-events: none;配合，否则它仍占据布局空间且能响应鼠标事件
transition 必须写在“稳定状态”的 CSS 规则里，而非 hover 或 active 中
很多人把 transition 放在 :hover 块里，结果发现“进入”有动画、“离开”却瞬间消失——这是因为离开时规则失效，浏览器回退到无 transition 的原始状态。正确做法是把 transition 放在基础选择器中（即非伪类部分）。
button {
opacity: 1;
transition: opacity 0.2s linear;
}
button:hover {
opacity: 0.6;
}这样进出都会走同一段过渡逻辑。若需不同进/出时长，得用 JavaScript 控制 class 切换 + transition-property 动态调整，纯 CSS 不支持。
opacity 过渡与 display: none 冲突，切勿混用
display: none 是立即生效的布局移除操作，它会中断正在运行的 opacity 过渡，并导致元素在动画完成前就从 DOM 中“消失”。常见错误是这样写：
立即学习“前端免费学习笔记（深入）”；
.fade-out {
opacity: 0;
transition: opacity 0.4s;
display: none; /* ❌ 这行会让过渡直接失效 */
}正确替代方案：
- 用
visibility: hidden;替代display: none;（保留占位，过渡完整） - 监听
transitionend事件，在动画结束后再设display: none; - 用
opacity+pointer-events: none;+aria-hidden="true"满足可访问性需求
opacity 过渡在某些场景下会触发重排（reflow），影响性能
虽然 opacity 本身是合成属性（通常只触发重绘），但若父容器启用了 will-change: transform; 或元素本身有 transform: translateZ(0);，能进一步确保其走 GPU 合成层。尤其在滚动区域或频繁切换的弹窗中：
.modal-overlay {
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity; /* 提示浏览器提前优化 */
}注意：will-change 不宜滥用，只加在真正需要过渡的元素上；长期开启可能增加内存开销。
opacity 过渡看似简单，但和 display、visibility、事件响应、性能提示这些点一碰，就很容易掉进“看起来动了，但交互不对”或“动着动着卡住”的坑里。
