根本原因是元素未脱离文档流导致重排，须用position: absolute配合父级position: relative锚定定位上下文，并仅使用transform和opacity动画属性，避免width、left、top等触发布局计算。
动画导致布局跳动，根本不是动画“不够快”，而是元素还在文档流里参与重排——position: absolute 能切断这个链条，但必须配对使用 position: relative 父容器，否则定位基准错乱，抖动变成飞走。
为什么加了 position: absolute 还在跳
常见错误是只给动画元素设 absolute，却没管它的父级。浏览器会把该元素相对于 定位，下划线、关闭图标、弹层全飘到左上角；更糟的是，父容器因子元素脱离而高度塌陷，兄弟元素直接上移——这不是抖动，是布局崩塌。
- 检查 computed 样式里的
offsetParent，如果不是预期的父容器，说明定位上下文缺失 - 父元素必须显式声明
position: relative（哪怕没其他用途），这是唯一可靠的锚点 - 别依赖
display: inline-block或float搭配absolute—— 浮动本身就会触发重排，和absolute冲突
动画属性别再碰 width、left、top
即使元素已 absolute，如果还用 width 过渡下划线，或靠 left 移动弹窗，浏览器仍要反复计算尺寸、触发布局（reflow）。真正零重排的做法，是只动 transform 和 opacity。
- 下划线展开：用
transform: scaleX(0)→transform: scaleX(1)，配合transform-origin: left - 悬停上浮卡片：用
transform: translateY(-4px)，别写top: -4px - 禁止混用：
left和transform同时存在时，后者虽覆盖前者，但样式引擎可能多做一次计算
容易被忽略的兼容性补丁：backface-visibility: hidden
旧版 Safari 和部分安卓 WebView 对 scaleX() 的亚像素渲染不稳定，缩放到 0.999 时边缘可能模糊或轻微跳动。这不是 bug，是合成器管线未被强制启用。
- 只需在动画元素上加一行：
backface-visibility: hidden - 它不改变视觉，但会提示浏览器启用更稳定的 GPU 合成路径
- 不需要加在父容器上，单个动画元素加即可，且无副作用
真正卡住人的从来不是 absolute 本身，而是忘了它是个“双人舞”——没有 relative 父容器，absolute 就是失控的；没有 transform 替代布局属性，absolute 就只是把抖动从“跳”变成“飞”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
