opacity必须由CSS在渲染前定义为初始值，否则JS延迟设置会导致“闪屏”；内联、内部或外部CSS均可，但需确保优先级和加载时机，并配合transition实现平滑动画。
opacity 直接写在 CSS 里就是初始透明度，不是“加载时才设置”——它从元素渲染那一刻起就生效。
为什么不能靠 JS 等到 DOMContentLoaded 才设透明度
页面加载时，元素默认是完全不透明的（opacity: 1）。如果你用 JavaScript 在 DOMContentLoaded 或 window.onload 里才执行 element.style.opacity = "0.3"，用户会看到一个“闪一下”：先全显，再变半透。这不是“初始透明度”，而是延迟设置。
- 真正意义上的初始透明度，必须由 CSS 在样式计算阶段就确定
- 浏览器解析 HTML + CSS 后，会立即应用
opacity值，不依赖 JS 执行时机 - 哪怕 JS 被阻塞或禁用，只要 CSS 加载成功，透明度照样生效
opacity 写在哪？内联、内部、外部都行，但优先级要留意
只要样式规则在元素渲染前已就绪，opacity 就是初始值。常见写法：
- 内联样式：
<div style="opacity: 0.4">内容</div>—— 最高优先级，无需担心被覆盖 - 内部样式：
<style>.box { opacity: 0.6; }</style>—— 放在<head>中，确保早于元素解析 - 外部 CSS：
.card { opacity: 0.2; }—— 需确保<link rel="stylesheet">在<body>之前加载
注意：如果多个规则同时匹配，!important 或更具体的选择器可能覆盖你设的 opacity，导致“看似没生效”。用浏览器开发者工具检查 computed 样式里的 opacity 值最可靠。
立即学习“前端免费学习笔记（深入）”；
想让初始透明 + 动画过渡？加 transition 但别忘初始状态
如果希望元素一出现就带淡入效果（比如从 0 到 1），必须把初始 opacity 设为 0，并配合 transition：
.fade-in {
opacity: 0;
transition: opacity 0.3s ease;
}
.fade-in.loaded {
opacity: 1;
}
然后 JS 只需在合适时机（如元素进入视口或 DOM 就绪后）添加 loaded 类 —— 这样动画才自然。关键点：
- 初始
opacity: 0必须由 CSS 提供，不能靠 JS 第一次赋值 -
transition要写在初始类里，否则从 0 到 1 会突变 - 不要用
setTimeout延迟加类，容易错失首屏渲染时机
真正影响“初始感”的从来不是 JS 何时执行，而是 CSS 是否在渲染前就位。opacity 不是事件驱动的属性，它属于样式层——写对位置、写对值、避开覆盖，就稳了。
