opacity淡入不生效的根本原因是transition需在状态变化前声明，且元素必须已渲染在DOM中；须避免display:none、确保transition写在基础样式里，并注意opacity对子元素的继承影响。
opacity + transition 实现淡入为什么有时不生效
直接写 opacity: 0; transition: opacity 0.3s; 并不能让图片“自动淡入”，因为 CSS 不会主动触发状态变化。必须靠 JS 改 class，或靠初始状态 + 伪类/媒体查询等触发时机。
常见错误现象：opacity 值变了但没动画、首次加载无过渡、用 display: none 切换后 transition 完全失效。
- 确保元素初始渲染时已存在于 DOM 中（不能是 JS 动态
appendChild后立刻设opacity: 1） - 避免和
display: none混用——display变化会中断 transition，改用visibility: hidden+opacity: 0 - 如果图片是懒加载的，得等
load事件后才添加淡入 class，否则可能在未加载完成时就执行了 opacity 变化
transition 要写在哪个选择器里才真正起作用
必须写在「稳定存在」且「不随状态切换而销毁」的选择器上，通常是图片本身或其容器的默认样式，而不是只写在 hover 或 .show 类里。
错误写法：.img.show { opacity: 1; transition: opacity 0.3s; } —— 这样 transition 属性本身是动态添加的，浏览器无法补全从 0→1 的过渡。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：基础样式就定义
transition: opacity 0.3s;，比如img { opacity: 0; transition: opacity 0.3s; } - 然后用 JS 切换 class 控制
opacity值：img.classList.add('loaded')，并在.loaded里只写opacity: 1 - 若用 CSS 动画替代 transition（如
@keyframes fadein），则无需依赖状态切换，但失去运行时控制灵活性
opacity 淡入对子元素的影响和规避方式
opacity 是继承性透明度，会影响整个元素及其所有后代。如果图片带文字说明或图例，一起变透明通常不是想要的效果。
- 不要把文字放在
<img alt="CSS如何实现图片透明度的淡入效果_利用transition监听opacity属性css" >标签内部（无效），也不要把文字作为<img alt="CSS如何实现图片透明度的淡入效果_利用transition监听opacity属性css" >的子元素（HTML 不允许） - 推荐结构：用容器包裹
<img alt="CSS如何实现图片透明度的淡入效果_利用transition监听opacity属性css" >和文字层，分别控制 —— 图片设opacity，文字层用rgba()或background-color控制可见性 - 更干净的做法：用
background-image替代<img alt="CSS如何实现图片透明度的淡入效果_利用transition监听opacity属性css" >标签，这样文字可自由定位在同级，不受 opacity 影响
兼容性与性能要注意的两个细节
opacity 本身兼容性极好（IE9+），但搭配 transition 在旧 Android WebView 或 iOS Safari 低版本中可能出现闪烁或跳变。
- 加
will-change: opacity可提升部分机型的渲染表现，但别滥用——只在确实需要动画的元素上加 - 避免同时过渡多个属性（如
transition: opacity 0.3s, transform 0.3s），尤其在移动端，容易触发重排重绘 - 如果淡入后还需交互（如点击放大），注意
opacity: 0的元素仍响应事件，要用pointer-events: none配合opacity: 0，并在过渡结束后恢复
淡入效果看着简单，真正稳落地的关键在于：transition 声明位置、DOM 存在时机、以及 opacity 对整棵子树的“穿透性”——这三点漏掉任何一个，都可能让动画卡在 0.1 秒不动。
