css 过渡与 opacity 的结合_控制透明度变化的过渡效果

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、事件响应、性能提示这些点一碰，就很容易掉进“看起来动了，但交互不对”或“动着动着卡住”的坑里。