定位元素视口变化时过渡失效，应改用transform替代top/left实现硬件加速过渡，配合requestanimationframe节流、避免同步布局计算，并在ios safari中添加translatez(0)强制gpu加速。
定位元素视口变化时的过渡失效问题
直接给 position: fixed 或 position: absolute 元素加 transition，通常没效果——因为浏览器不把 top/left 等偏移值的变更识别为“可过渡属性”，尤其当这些值由 JavaScript 动态计算并写入内联样式时，过渡常被跳过或卡顿。
用 transform 替代 top/left 实现可靠过渡
浏览器对 transform: translate() 的硬件加速支持更成熟，且能稳定触发过渡。只要元素本身已脱离文档流（如 position: fixed），用 translateX/translateY 控制位移，就能获得平滑响应。
- 把原本写在
top和left上的数值，转为transform: translate(10px, 20px) -
transition必须写在初始状态里，例如：transition: transform 0.3s ease-out; - 避免混用
top+transform，否则会触发重排（layout），破坏过渡连贯性 - 若需响应
resize或滚动监听（如视差、吸顶），JS 中只更新style.transform，不要碰style.top
/* 推荐写法 */
.sticky-header {
position: fixed;
top: 0;
left: 0;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sticky-header.scrolled {
transform: translateY(-10px);
}
监听视口变化时的性能陷阱
用 window.addEventListener('resize', handler) 或 scroll 直接触发 transform 更新，容易因高频调用导致掉帧。必须节流或使用 requestAnimationFrame 批量处理。
- 别在
resize回调里直接改样式；改用raf缓存一次更新 - 对频繁变动的定位元素（如跟随滚动的侧边栏），优先用
position: sticky，它原生支持过渡（但兼容性限于 Chrome 56+/Firefox 59+） - 若必须 JS 控制，确保只更新
transform，且避免读取offsetTop等触发同步布局计算
移动端 Safari 的 translateZ 强制 GPU 加速
iOS Safari 对 transform: translate() 的优化有时不稳定，尤其在快速 resize 后出现卡顿。加一个无视觉影响的 translateZ(0) 可强制启用 GPU 渲染层。
- 写成
transform: translateX(10px) translateZ(0); - 注意不要滥用：每个
translateZ(0)都会新建合成层，过多会增加内存压力 - 仅在 iOS 上观察到卡顿时添加，其他平台无需
真正难的不是加 transition，而是让浏览器始终走合成（compositor）通路——这意味着不能触发 layout 或 paint，只动 transform 和 opacity。一旦开始读取 offsetHeight 或设置 border，平滑就没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
