页面加载时transition自动触发并非bug，而是因初始状态与样式声明存在可动画属性差值所致；解决关键是将transition声明在基础类中并显式定义所有参与过渡属性的初始值。
页面加载时 transition 自动跑一次，不是 bug，是浏览器按 CSS 规则“老实执行”的结果——只要初始状态和样式声明之间存在可动画属性的差值，它就会过渡。解决的关键不是禁用动画，而是控制“谁来定义初始状态”。
transition 必须写在基础类里，不能只靠状态类
很多人把 transition 塞进 .active 或 :hover 里，结果元素一渲染就从“无 transition”变成“有 transition”，而此时属性值已计算完毕，浏览器只能补一帧——看起来就像“自动触发”。
-
transition必须声明在元素的默认样式中（比如.card），确保它从第一帧起就参与样式计算 - 检查开发者工具「Computed」面板，确认
transition-property在常态下已生效，而不是只在伪类里亮着 - 避免用 JS 动态加 class 的方式“开启” transition，那等于重置上下文
初始值必须显式声明，别信 auto 或默认值
比如你写了 .box { transition: transform 0.3s; }，但没写 transform: translateX(0);，浏览器第一帧的 transform 是 none，而 none → translateX(100px) 不可插值，某些引擎会强行补一帧过渡，造成闪或跳。
- 所有参与 transition 的属性，都要在基础类里写明初始值：
opacity: 1、transform: translateZ(0)、top: 0等 - 用
getComputedStyle(el).transform检查初始值是不是none或空字符串，是的话就是隐患 - 慎用
height: auto+transition: height，auto 无法插值，改用max-height
动态插入元素时，transition 失效的真正原因
Vue/React 组件挂载后 DOM 才出现，此时浏览器已错过首帧样式计算时机。即使你写了正确的初始值，也可能因渲染顺序问题导致 transition 被忽略。
立即学习“前端免费学习笔记（深入）”；
- 不要等
mounted后再加 class，应在组件 render 阶段就带好基础类（含transition和初始值） - 若必须 JS 控制，加 class 后强制一次重排：
el.offsetHeight或getComputedStyle(el).opacity，再设目标值 - 对大量动态元素，避免统一用
transition: all，它会让 margin/padding 等非预期属性也参与过渡，放大首帧抖动
最常被忽略的一点：display: none 切回 block 时，图层重建会导致 backface-visibility: hidden 失效，哪怕你写了 transform: translateZ(0)，首帧仍可能走 CPU 渲染。这时候不是 transition 写错了，是图层生命周期没管住。
