如何在CSS中实现标签页Tab切换时下划线滑动跟随过渡？-css教程-PHP中文网

真正能跑稳的下划线动画方案是用 transform: translatex() + getboundingclientrect() + requestanimationframe；因 left 和 width 触发重排且在 flex、缩放、滚动等场景下坐标错乱，而 translatex 避免布局计算，配合 raf 确保渲染时机精准。

如何在css中实现标签页tab切换时下划线滑动跟随过渡？

直接用 left 或 width 做下划线动画，90% 的卡顿、跳变、错位都源于此——它触发重排，且在 flex、缩放、滚动、字体加载后坐标全乱。真正能跑稳的方案，只有一条路：用 transform: translateX() + getBoundingClientRect() + requestAnimationFrame。

为什么 `left` 和 `width` 会失效

它们修改的是布局属性，每次更新都会强制浏览器重算整个 DOM 树的位置和尺寸。尤其在移动端：

offsetLeft 依赖 offsetParent，而 flex 容器、transform 缩放、甚至 padding 都会让参照系漂移
width 在 inline 元素或文字换行时不可靠，系统字号放大后计算值直接失准
left 动画在快速连续点击或页面滚动中极易掉帧，甚至“闪回”到初始位置

下划线元素必须满足的三个硬性条件

缺一不可，否则 translateX() 就是白写：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.underline 必须和 tab 项同级，且包裹在同一个 position: relative 容器里（比如 .tab-nav）
.underline 自身设 position: absolute; bottom: 0;，禁用 left 或 margin-left
CSS 中 transition 必须写在默认态（不是 :hover 或 .active），且显式包含 transform 和 width，例如：transition: transform 0.25s ease, width 0.25s ease;

JS 计算位移和宽度的正确姿势

不能靠 offsetLeft，也不能只在点击时算一次：

用 target.getBoundingClientRect() 获取当前 tab 的视口坐标，再减去容器的 getBoundingClientRect().left，得到真正可用的 translateX 值
宽度取 target.getBoundingClientRect().width，并用 Math.round() 防止 sub-pixel 抖动
所有样式更新必须包在 requestAnimationFrame() 里，否则浏览器可能强制同步布局
除点击外，还要监听 resize、orientationchange，以及 DOM 变更（如权限控制隐藏某 tab）后的手动重算