<p>底部导航 transform 滑动不生效，主因是父容器 overflow: hidden 裁剪位移，或 iOS 缺失 -webkit-transform 前缀；需设 overflow 为 visible/scroll，补全 -webkit- 前缀及 transition，并用 class 或 CSS 变量控制动画。</p>
底部导航切换时 transform 滑动不生效？检查是否加了 overflow: hidden
常见错误是给导航容器设了 overflow: hidden，但子项用 transform: translateX() 滑动时，位移超出父容器边界就被裁掉了——看起来像“没动”。
- 必须确保滑动容器（比如
.nav-wrapper）的overflow是visible或scroll，不能是hidden - 如果需要隐藏横向滚动条，用
overflow-x: hidden+overflow-y: visible更安全 - 移动端 Safari 对
overflow: hidden+transform组合特别敏感，哪怕父级只是 body 上有overflow: hidden，也可能影响子级动画
用 CSS transition 配合 transform 实现平滑滑动
只写 transform: translateX() 不会动，得靠 transition 触发动画。关键在属性名、时间、缓动要匹配。
- transition 必须写在可变化的元素上，且监听的是
transform，不是left或margin-left：transition: transform 0.3s ease-in-out - 不要用
all 0.3s，会导致其他属性（比如 color）也动画，干扰预期 - 移动端建议加上
will-change: transform提前提示渲染层提升，避免偶发卡顿（尤其 iOS） - 示例：当前激活项索引为 1（从 0 开始），3 个 tab，每个宽 100px，则
transform: translateX(-100px)
JavaScript 控制滑动位置时，别直接改 style.transform
用 JS 动态设置 element.style.transform 会覆盖 CSS 中定义的 transition，导致瞬间跳变。
- 推荐方案：用 class 切换 + CSS 变量驱动位移，比如
.nav-scroller--shift-1 { transform: translateX(-100px); } - 或者用
element.style.setProperty('--offset', '-100px')，CSS 中写transform: translateX(var(--offset));，这样 transition 仍生效 - 避免在循环或高频事件（如 scroll）里反复设
style.transform，容易触发重排重绘 - 注意：
getBoundingClientRect()返回的位置是相对视口的，计算偏移时别漏掉导航容器自身的 left 值
iOS Safari 下 transform 滑动卡顿？补上 -webkit-transform
iOS 15 之前部分版本对 transform 的硬件加速支持不稳定，纯标准写法可能掉帧。
立即学习“前端免费学习笔记（深入）”；
- 必须同时写两行：
transform: translateX(-100px);和-webkit-transform: translateX(-100px); - transition 也要对应补上：
-webkit-transition: -webkit-transform 0.3s ease-in-out; - 如果用了
will-change，同样要加-webkit-will-change - 真机调试时，打开 Safari 开发者工具 → “Timelines” 查看每帧耗时，卡顿通常出现在 layout 或 paint 阶段，说明有隐式合成或重排
overflow 和 iOS 下的 -webkit- 前缀补全——这两处一错，动画就直接失效或卡成幻灯片。 
