应使用 preload 类锁定初始状态，待 requestanimationframe 第一帧再移除以延迟过渡生效；preload 需覆盖 opacity、transform 等属性并配合 :not(.preload) 启用 transition，避免刷新时自动触发。
页面刷新时过渡效果自动触发怎么办
浏览器加载完 CSS 后，只要元素初始状态和 transition 规则匹配，且样式值发生“隐式变化”（比如从无 class 到有 class、或从未设置某属性到设置了），就会立刻执行过渡——哪怕你根本没动它。这不是 bug，是 CSS 的正常行为。
典型现象：opacity: 0 → opacity: 1 带 transition: opacity 0.3s 的元素，一刷页面就“淡入”，用户还没来得及看第一眼，动画已经结束了。
- 根本原因不是 JS 控制晚了，而是 CSS 解析完成、DOM 渲染时，浏览器已按当前计算样式“补全”了初始态
- 不能靠
display: none+setTimeout切换，因为首次渲染仍可能闪一下 -
animation: fade-in 0.3s同样会触发——只要定义在元素上且满足触发条件
用 preload 类延迟过渡生效的实操逻辑
核心思路：让元素初始加载时“不满足过渡条件”，等真正需要动画时再切换状态。最稳妥的方式是用一个占位类（比如 preload）把过渡锁住，JS 在合适时机移除它。
关键不在类名本身，而在它的 CSS 定义方式：
立即学习“前端免费学习笔记（深入）”；
- 必须覆盖所有可能触发动画的属性，例如：
.preload { opacity: 1 !important; transform: none !important; } - 过渡规则要写在非
preload的选择器里，比如.card:not(.preload) { transition: opacity 0.3s, transform 0.3s; } - 不能只靠
transition: none，因为none不会阻止属性值变化，只是禁用过渡；而我们要的是“初始值不参与过渡链”
示例片段：
/* 初始锁定 */
.card.preload {
opacity: 1;
transform: translateX(0);
}
/* 只有移除 preload 后才启用过渡 */
.card:not(.preload) {
transition: opacity 0.3s ease, transform 0.3s ease;
}
preload 类该在什么时候移除
不能等 DOMContentLoaded，因为此时渲染可能已完成，用户已看到“锁住态”。也不能太早（比如脚本一执行就移），因为 DOM 可能还没挂载好。
- 推荐时机：
requestAnimationFrame第一帧，确保样式已计算、布局已触发但尚未绘制 - 更保守的做法：监听
load事件后加一次requestAnimationFrame，兼顾图片/字体加载完成 - 如果页面有 SSR 或 hydration 需求（如 React/Vue），需在客户端接管后、首次渲染前移除
preload，否则服务端生成的 HTML 会带这个类，导致首屏不可见
简短 JS 示例：
document.addEventListener('load', () => {
requestAnimationFrame(() => {
document.querySelectorAll('.card.preload').forEach(el => {
el.classList.remove('preload');
});
});
});为什么不用 animation-delay 或 transition-delay
这两个属性控制的是“开始时间”，不是“是否启用”。即使设了 transition-delay: 999s，只要样式变化发生，浏览器仍会记录这次变化，并在延迟结束后补上过渡——而刷新瞬间的样式变化早已发生。
-
transition-delay对初次渲染无效：它只对后续的样式变更起作用 -
animation-delay虽然能推迟动画，但元素仍会以最终态渲染（除非配合animation-fill-mode: backwards），而backwards又可能让初始态变成动画起始态，反而加重闪烁 - 兼容性上，
preload方案在所有支持class和:not()的浏览器中都可靠；而animation-fill-mode在旧版 Safari 中行为不一致
真正难处理的，是那些依赖 CSS 自动计算的场景——比如用 max-height: 0 + overflow: hidden 做折叠动画。这时候 preload 类不仅要锁高度，还得同步控制 overflow 和 padding，否则布局抖动无法避免。
