H5页面CSS过渡动画“闪现”本质是渲染早于样式计算完成，需在默认状态声明transition、避免不可过渡属性组合、用requestAnimationFrame或强制重排确保时机，并排查CSS重置干扰。
H5 页面初次加载时 CSS 过渡动画“闪现”执行（即元素未等过渡开始就直接跳到结束态），本质是浏览器在样式计算完成前已触发了渲染，而 transition 属性尚未被正确识别或生效。这不是动画写错了，而是样式注入时机、初始状态缺失或渲染流水线干扰导致的。
确保过渡属性在初始状态就声明
transition 必须写在元素的**默认（非:hover / 非.active）状态中**，且不能依赖 JS 动态添加 class 才首次出现。否则浏览器可能跳过过渡，直接应用目标样式。
- ❌ 错误写法：只在
.active类里写transition: transform 0.3s;，初始无该类，也无 transition 声明 - ✅ 正确写法：默认状态就定义好 transition，例如：
.box { transform: translateY(0); transition: transform 0.3s ease; }<br>.box.active { transform: translateY(-20px); }
避免初始状态与目标状态“不可过渡”
某些 CSS 属性组合无法形成连续插值，会导致浏览器放弃过渡、直接渲染终态。常见于 display、visibility、opacity 混用，或从 auto 值出发做过渡。
- display: none → block 不可过渡，改用 opacity + visibility + transform 组合控制显隐
- height: auto → 100px 不可过渡，改用 max-height（设一个足够大的固定值如 999px）或使用 transform 缩放模拟
- 避免初始写
opacity: 0; transform: scale(0.8);却在 JS 中立刻加类触发动画——需确保 class 添加前 DOM 已就绪，可用requestAnimationFrame延迟一帧
强制重排后触发动画（关键补救手段）
当通过 JS 添加 class 触发过渡时，若浏览器尚未完成样式计算，会跳过动画。可在添加 class 前强制读取一个布局相关属性（如 offsetHeight），触发同步重排，让 transition “准备好”。
立即学习“前端免费学习笔记（深入）”；
- 示例代码：
el.classList.remove('in');<br>void el.offsetHeight; // 强制重排<br>el.classList.add('in'); - 更稳妥写法（兼容性更好）：
el.classList.remove('in');<br>requestAnimationFrame(() => {<br> requestAnimationFrame(() => {<br> el.classList.add('in');<br> });<br>});
检查是否被 CSS 重置或继承干扰
某些 UI 框架（如 reset.css、normalize.css）或全局样式会重置 transition 或 animation，或父级设置了 all: unset，导致子元素过渡失效。
- 用浏览器 DevTools 的 Styles 面板检查元素最终 computed 的
transition值是否为none - 确认未被
!important覆盖，也未因 specificity 不足被更高权重要求覆盖 - uni-app 等跨端框架中，注意 scoped style 下伪类过渡可能未生效，建议将过渡规则写在非 scoped 样式块中
