移动端分段控制器平滑切换的关键是避免重排、控制触发时机、正确使用CSS变量作用域；应改用transform: translateX()替代left，将变量绑定到每个input上，并通过opacity: 0+pointer-events: none隐藏input以保障可访问性。
移动端分段控制器（Segmented Control）要真正平滑切换，关键不在“加 transition”，而在于**避免重排、控制触发时机、用对 CSS 变量作用域**。纯伪类（如 :checked）能免 JS，但变量若声明在错误层级，会导致切换卡顿或状态不同步。
为什么直接写 transition: left 0.25s 在移动端常失效
left 动画会触发 layout（重排），尤其在 iOS Safari 中，配合缩放、flex 容器或父级 transform 时，offsetLeft 计算易偏移，动画跳变明显。更糟的是，如果容器宽度随 viewport 变化（比如用 100vw），left 的像素值无法自适应，位移错位。
- 改用
transform: translateX()—— 合成属性，不触发布局，GPU 加速更稳 - 确保控制器容器有
position: relative，子项（如滑块）设position: absolute - 别在
:hover或:active里写动画逻辑——移动端无 hover，且 active 状态持续时间不可控
如何用 CSS 变量驱动滑块位置，又不被伪类覆盖
CSS 变量必须声明在能被伪类继承的上下文里。常见错误是把 --slide-offset 写在 .segment-control 上，却在 input:checked ~ .slider 里试图用 transform: translateX(var(--slide-offset)) —— 此时变量未更新，或被静态计算锁定。
- 正确做法：将变量定义在
:root或.segment-control的 :not(:has(input:checked)) + :has(input:checked) 这类组合选择器外层，或直接绑定到每个input上：input[value="a"] { --offset: 0; }、input[value="b"] { --offset: 100%; } - 滑块元素写：
transform: translateX(calc(var(--offset, 0) - 50%));（减去自身宽一半，居中对齐） - 过渡只写
transform，别带all：transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1)
伪类联动时，移动端点击区域与 focus 状态怎么保真
很多实现用 display: none 隐藏 input，结果 iOS Safari 无法键盘 focus，VoiceOver 读不出状态，且点击热区只剩 label 文字部分（常不足 44px 最小可点尺寸）。
立即学习“前端免费学习笔记（深入）”；
- 隐藏
input用：position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; - label 必须设
display: block; width: 100%; height: 100%;，并加-webkit-tap-highlight-color: transparent; - 确保
for属性和id严格匹配，且input和label同级或 label 包裹 input —— 否则input:checked ~ .slider选择器失效 - 测试时手动触发
focus，看是否出现蓝色 outline；没出现，说明 focus 流失，变量不会响应
最难调的不是位移曲线，而是变量在伪类切换瞬间是否被浏览器及时重计算——这取决于声明位置、选择器权重、以及是否触发了强制同步布局。建议用 Chrome DevTools 的 Rendering 面板勾选 “Layout Shift Regions”，切几次就看出哪一步偷偷重排了。
