移动端滚动中transition卡顿的根本原因是浏览器节流渲染以保障滚动流畅，而非代码错误；需确保合成层启用、避免layout thrashing、合理设置过渡时长与缓动函数，并明确声明过渡属性。
移动端滚动中 transition 突然卡顿或失效
根本不是 transition 写错了，而是 Safari 和部分安卓 WebView 在 scroll 事件活跃期间会主动暂停非合成属性的动画帧调度，甚至丢弃中间帧。你看到的“卡死”，其实是浏览器在节流渲染——它优先保障滚动流畅，把过渡动画暂时挂起。
为什么 transform/opacity 也跟着卡，明明是可合成属性
常见错觉：只要用了 transform 或 opacity 就一定 GPU 加速。但实际生效前提是「元素必须有独立合成层」且「父级不阻断」。一旦父容器写了 overflow: hidden、filter: blur(1px) 或错误位置的 will-change: transform，子元素的合成层就会被降级回主图层，滚动时所有动画都得等主线程空闲。
- 用 Chrome DevTools → Rendering → 勾选 “Layer borders”，绿色边框才表示合成层真正启用
-
will-change: transform必须在滚动开始前至少一帧设好，不能写在:active或动态 class 里 - 父级
filter或clip-path会隐式创建新层，但又不提子元素，导致子元素动画被迫同步重绘
JS 监听 scroll 改 style 触发 layout thrashing
在 scroll 回调里直接改 el.style.transform = `translateY(${y}px)` 看似没问题，但如果同时有 transition 声明，浏览器会在每一帧尝试 reconcile「JS 当前值」和「CSS 过渡目标值」，造成读写交错。尤其当 JS 中夹杂了 el.offsetHeight 或 getBoundingClientRect()，会强制同步 layout，直接打断正在跑的 transition 流水线。
- 加
{ passive: true }是底线，但还不够；更稳妥是改用IntersectionObserver或节流到每 100ms 仅触发一次状态切换 - 避免在
scroll中增删类名来触发动画；改用 CSS 自定义属性 +transition，例如：el.style.setProperty('--y', y)，再在 CSS 里写transform: translateY(calc(var(--y) * 1px)) - 滚动中需要响应的元素（如吸顶栏），优先用
position: sticky+transform位移，而不是靠 JS 改top
transition-duration 太短或缓动函数被覆盖
在高刷新率屏幕（如 iPhone 14 Pro 的 120Hz）上，transition-duration: 0.1s 实际只有约 12 帧，人眼极易感知跳变；而某些 UI 框架的全局重置 CSS 会静默覆盖 transition-timing-function，比如 * { transition-timing-function: linear !important; }，导致你写的 cubic-bezier(0.25, 0.46, 0.45, 0.94) 完全无效。
- 移动端建议最低使用
0.15s，上限不超过0.25s；过长削弱响应感，过短无法形成有效插值 - 务必在 DevTools 的 Computed 面板中确认
transition-timing-function的最终值，别只看 Styles 面板 - 不要依赖
transition: all；明确写transition: transform 0.2s ease, opacity 0.2s ease，避免不可控属性干扰
最常被忽略的一点：transition 不是“加了就动”，它是浏览器对两个确定状态之间变化的承诺；滚动场景下，这个承诺极易被中断——不是代码没写对，而是你没给浏览器留出安静执行的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
