页面刷新时transition自动触发是浏览器渲染机制所致：元素初始样式满足过渡条件时，浏览器在渲染前即推导并执行动画。
页面刷新时 transition 突然“自己动了”是怎么回事
这不是 bug，是浏览器渲染机制的必然结果：只要元素初始样式满足 transition 触发条件（比如从无值→有值、或从继承值→显式值），且属性可过渡，CSS 解析完就立刻补全“变化链”，动画当场执行。
典型表现：opacity: 0 → opacity: 1 配 transition: opacity 0.3s，一刷页面就淡入，用户根本没来得及看第一眼。
- 不是 JS 执行慢——DOM 渲染前，浏览器已按最终计算样式完成过渡起点和终点的推导
- 不是
display: none能解决——首次渲染仍可能闪一下，因为 visibility 或 opacity 的初始值已被计算并参与插值 -
animation同样会自动播，但它是设计如此；transition的“自动触发”却是开发者常误以为“需要交互才动”的认知偏差
为什么 transition 写在 :hover 里第一次没效果
因为 transition 必须写在「稳定态」上，也就是元素默认状态的规则块里。如果只写在 :hover 中，浏览器在 hover 进入时才读到过渡定义，而此时属性值已跳变完成，没机会插值。
- 正确写法：
.btn { transition: background-color 0.2s; } .btn:hover { background-color: #007bff; } - 错误写法：
.btn:hover { transition: background-color 0.2s; background-color: #007bff; }—— 第一次 hover 没动画，第二次才有 - 同理，JS 切换 class 时若直接
el.classList.add('active')，也可能因样式合并被跳过过渡，需加el.offsetHeight或setTimeout(..., 0)强制重排
如何阻止 transition 在页面加载时自动播放
核心思路：让初始状态“不构成变化”。最可靠方式是用一个占位类（如 preload）锁住所有可能触发动画的属性值，等 JS 准备就绪再移除它。
立即学习“前端免费学习笔记（深入）”；
-
.preload { opacity: 1 !important; transform: none !important; }—— 覆盖所有待过渡属性，且用!important抗覆盖 -
.card:not(.preload) { transition: opacity 0.3s, transform 0.3s; }—— 过渡规则必须排除preload类 - JS 中用
requestAnimationFrame(() => el.classList.remove('preload'))，确保在第一帧渲染前移除，避免闪动 - 不能只靠
transition: none—— 它只是禁用动画，不阻止属性值被计算和应用
transition: all 0.3s 为什么危险
它会让所有可过渡属性（包括你没意识到的）一起动，比如 box-shadow、z-index、outline，甚至某些浏览器对 font-size 的隐式插值，导致意外抖动或布局偏移。
- 性能隐患：触发 layout + paint，尤其在移动端，
all可能强制合成层重建 - 维护风险：后续 CSS 修改某属性（如加
filter）会无声无息加入过渡，难排查 - 推荐写法：
transition: opacity 0.2s, transform 0.2s, background-color 0.2s;—— 明确、可控、利于 GPU 加速 - 注意：
height: auto、display、margin（非数值）等不可过渡属性，即使写了也不会动，但会浪费解析开销
真正容易被忽略的点是：transition 的“初始态”由浏览器计算得出，不是你写的 CSS 行，而是最终 computed style。哪怕你没写 opacity，只要父级或继承链给了值，它就参与过渡链。所以 preload 类必须覆盖到所有可能被继承或计算出的值，不能只盯自己写的那几行。
