页面加载时自动触发transition是浏览器规范行为，核心解法是重置初始态或延迟启用过渡；推荐用.preload类锁定初始样式并用requestAnimationFrame移除，避免transition:all和height:auto等陷阱。
页面加载时自动触发 transition，不是 bug，是浏览器按规范渲染的必然结果；核心解法不是“阻止”，而是“重置初始态”或“延迟启用过渡”。
为什么页面一打开就动了一下？
浏览器解析完 CSS 后，只要元素当前计算样式和声明的 transition 规则匹配（比如你写了 transform: rotate(360deg) 但没写基础选择器里的起始值），它就会把“从无到有”或“从隐式默认值到显式值”的过程当作一次属性变化，并立刻插值——哪怕你根本没加 class、没写 JS。
- 典型诱因：只在
:hover或.active里写transition，而默认状态没声明可过渡属性的初始值 - 常见错误写法：
div { transform: rotate(360deg); transition: transform 0.4s; }→ 浏览器会把首帧的隐式transform: none当作起点 - opacity、max-height、transform 等属性若初始值依赖
auto或未声明，都会被浏览器“补全”并触发过渡
用 .preload 类锁住初始态再移除
这是目前最稳定、不依赖事件时机、兼容 SSR 的方案。关键不在类名，而在它的 CSS 定义方式：
-
.preload必须覆盖所有可能参与动画的属性，且用!important防止被覆盖：.preload { opacity: 1 !important; transform: none !important; max-height: 1000px !important; } -
transition规则必须写在排除该类的选择器中，例如：.card:not(.preload) { transition: opacity 0.3s, transform 0.3s; } - JS 移除时机建议用
requestAnimationFrame第一帧，比DOMContentLoaded更稳妥：requestAnimationFrame(() => el.classList.remove('preload'));
避免 transition: all 和简写属性埋雷
过渡失效或乱触发，80% 出在过度宽泛的声明上。浏览器对 all 的解释不一致，且简写属性（如 margin、font）会隐式展开多个子属性，导致不可控插值。
立即学习“前端免费学习笔记（深入）”；
- 禁用
transition: all 0.3s，改用明确列表：transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); - 慎用
height: auto过渡，它无法插值；改用max-height: 0→max-height: 500px - 不要在 hover 中动态改
margin或padding并期望平滑过渡；优先用transform: translateY()
JS 控制过渡启用状态（React/Next.js 场景）
服务端渲染或状态从 Cookie 恢复时，元素“本不该动却动了”，本质是 UI 状态与动画开关耦合。必须拆开管理：
- 用两个独立状态：
visible（控制是否显示）和transitionEnabled（仅用户交互后设为 true） - 过渡类只在
transitionEnabled为 true 时才加入，例如：className={`${visible ? 'opacity-100' : 'opacity-0'} ${transitionEnabled ? 'transition-all duration-300' : ''}`} - 首次挂载时，
useEffect只恢复visible，不碰transitionEnabled；点击按钮后再setTransitionEnabled(true)
最容易被忽略的一点：transition 规则必须始终存在于计算样式中——它不能随状态类一起被加/删。一旦 transition 属性本身消失，后续任何值变化都只会瞬时生效，连 transitionend 都不会触发。
