状态之间的转换 · A 变成 B
标签指示器滑动Sliding tab indicator
- 一块软垫
- 滑过去
- 被拉长一下
选中态那块底色从上一个标签滑到下一个，滑的中途被拉长一点、到位再收回。这一下拉长是全部的关键：匀速平移只是「换了位置」，拉长说明是同一块东西被拖过去的。
什么时候用它
用在顶部或底部的分段控件上（2–5 项）。项数太多时别用：滑过五个标签要等太久，还不如直接淡入。另外一定要用 transform 而不是改 left —— 改 left 会逐帧重排，滑起来会顿。
参数
transform: translateX 0→128px · scaleX 1→1.18→1 · 320ms cubic-bezier(0.22, 1, 0.36, 1)
配方
标签指示器滑动 → transform: translateX 0→128px · scaleX 1→1.18→1 · 320ms cubic-bezier(0.22, 1, 0.36, 1)
给 AI 的一句话
做一个标签指示器：选中块用 transform: translateX 滑到目标标签，中间加一段 scaleX 1→1.18→1 的拉长，整段 320ms 用 cubic-bezier(0.22, 1, 0.36, 1)。绝对不要用 left 或 margin-left 做位移，那会逐帧重排。