页面加载时transition自动触发的根本原因是浏览器将css中声明的初始值（如transform: rotate(90deg)）误判为属性变更终点，从隐式初始值（如transform: none）插值过渡所致。
transition在页面加载时自动触发的根本原因
根本不是 transition “主动”触发，而是浏览器在解析初始 CSS 时，把 transform、opacity 等属性的初始值（比如 transform: rotate(90deg)）当作「变化的终点」，而元素从无样式/未计算状态渲染到该值的过程，被浏览器误判为一次属性变更——于是插值动画就悄悄发生了。
典型表现：页面一打开，某个 div 就“自己转了一下”或“淡入一下”，哪怕你没 hover、没加 class、也没 JS 操作。这通常发生在用 <link> 引入外部 CSS 且样式中直接写了带过渡效果的初始变换时。
为什么写在 :hover 里就没事，写在基础选择器里就会触发
因为 transition 必须持续存在于元素的「计算样式」中，才能参与起始值与目标值之间的插值。一旦只写在 :hover 里，初始状态根本没有 transition 声明，浏览器压根不开启过渡上下文；但如果你在基础规则里写了：
.card {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
那浏览器在首次渲染时，就会尝试从「隐式初始值」（比如 opacity: 1、transform: none）过渡到你写的这些值——而这个“隐式初始值”往往并不存在于你的 CSS 中，是浏览器按规范推导出来的，导致起点不可控。
- DevTools 的 Computed 面板里，检查
transition-property是否在元素初始状态下就存在（而不是只在交互态出现） - 确认
opacity、transform等属性是否真的在基础样式中显式声明了初始值（不能靠继承或默认） - 避免用
transition: all—— 它会把本不该过渡的属性也卷进来，比如某些 UA 样式里的outline或box-shadow
如何阻止初次加载时的意外过渡
最稳妥的做法是：先禁用所有 transition，等 DOM 渲染完成后再启用。不是靠 JS 延迟加 class，而是用 CSS 层级强制覆盖：
在 上初始添加一个类名，比如 no-transition：
body.no-transition * {
transition: none !important;
-webkit-transition: none !important;
}
然后在 DOMContentLoaded 后立刻移除它：
document.addEventListener('DOMContentLoaded', () => {
document.body.classList.remove('no-transition');
});
- 不用
window.onload—— 它等资源（图片、字体）加载完才触发，太晚 - 不要用
setTimeout(..., 0)—— 无法保证样式已计算完毕，有竞态风险 - 移除类名后，再通过 JS 添加
.is-loaded触发入场动画，这样起点和终点都可控
容易被忽略的细节：transition-delay 不是救命稻草
有人试图用 transition-delay: 9999s 把首次过渡“延后到宇宙热寂”，但这只是掩耳盗铃：delay 只影响触发后的等待时间，不改变「浏览器是否认定这次变化需要插值」。只要 transition 声明存在、且属性值在初始渲染时发生隐式变化，动画就已在内存里生成了帧序列。
真正关键的是控制「transition 声明何时生效」和「属性初始值是否明确」——这两点漏掉任何一个，加载时的跳变或意外动画就很难彻底根除。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
