首次渲染transition抖动源于合成层未就绪，需预热图层：用backface-hidden强制提前创建独立图层，避免will-change静态声明，确保transition-transform等显式指定属性而非transition-all，并在SSR中配合useEffect或requestAnimationFrame延迟启用动画。
首次渲染时的 transition 抖动，根本不是动画没配好，而是浏览器在“合成层未就绪”状态下强行启动过渡——尤其是当元素初始状态就带 transform/opacity 变化，但图层提升滞后于首帧绘制。
transition类写对了，但首帧仍抖动
常见现象：页面一打开，某个 hover:scale-105 元素突然轻微跳一下，哪怕鼠标根本没动。这不是 hover 触发的，是元素挂载时从无样式到有 transition 的瞬间冲突。
- 原因在于 Tailwind 的
transition-transform等类只声明 CSS 属性，不触发图层提升；而浏览器默认把新元素放在主图层，直到第一帧渲染完成才考虑是否升层 - 如果首帧恰好要执行缩放或透明度变化，就会因未走 GPU 合成管线而掉帧，高刷屏下尤其明显
- 尤其多见于 SSR（如 Next.js）场景：服务端吐出的 HTML 已含
transform: scale(1)，但客户端水合前无图层，水合后立刻补上transition，造成“回弹式”微抖
如何让transition从第一帧就稳定
必须在元素挂载前就“预热”合成层，不能等 hover 或 JS 触发后再加。
- 给元素加
backface-visibility: hidden—— Tailwind 中用backface-hidden类，它不改变视觉，但强制浏览器提前创建独立图层 - 避免只靠
will-change: transform：这个属性必须动态设置（JS 在动画开始前加，结束后立刻设回auto），静态写在 class 里反而可能拖慢首屏 - 若用
opacity过渡，确保初始态不是opacity: 1直接硬切，而是从opacity-0→opacity-100，并配合transition-opacity duration-200写在基础 class 中 - Next.js 等 SSR 框架中，可加
useEffect(() => { /* 强制重绘一次 */ }, [])或用requestAnimationFrame延迟 1 帧再启用动画逻辑
为什么transition-all会让首次抖动更严重
transition-all 不是省事，是把问题藏得更深——它会在首帧同时尝试合成 opacity、transform、box-shadow、filter，而其中 box-shadow 和 filter 默认不进合成层，导致整条过渡链被迫降级回主线程。
- 哪怕你只改了
scale，transition-all也会拉上border-color一起动，而后者触发重绘 - SSR 场景下，服务端生成的 HTML 若已含
transition-all，客户端水合时会立即尝试插值所有属性，但部分属性尚未准备好，产生错位 - 真正稳的做法是显式写
transition-transform duration-300，删掉所有未用到的transition-类
最易被忽略的一点：抖动未必来自你写的 transition，而是父容器用了 contain: layout 或 overflow: hidden 却没配 backface-hidden，导致子元素图层被截断——这种抖动只在首次渲染出现，之后一切正常，极难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
