h5开关滑块“加速—匀速—减速刹车感”需用cubic-bezier分段模拟，推荐cubic-bezier(0.34, 1.1, 0.66, 1)，起始y>1实现慢启动，末端y=1达成明显减速刹车效果。
在 H5 中实现开关（Switch）滑块的“加速—匀速—减速刹车感”，核心是用 transition-timing-function 配合分段动画逻辑，而非单靠一个 ease 或 cubic-bezier。纯 CSS 无法直接控制中间帧速度变化，但可以通过「两阶段过渡 + 状态切换」模拟出接近物理惯性的刹车效果。
用 cubic-bezier 模拟“启动加速 + 刹车减速”
CSS 的 transition-timing-function 支持自定义贝塞尔曲线。开关滑块从关→开时，希望它：起步稍慢（防突兀）、中段快、末端明显减速（像刹车停稳）。推荐这个值：
说明：
- 第一对点
(0.34, 1.1)：y > 1 表示“超调”，让起始斜率小（慢启动），同时为后续提速留空间 - 第二对点
(0.66, 1)：y = 1 且 x - 该曲线整体呈“S 型偏右”，比
ease-in-out更强调末端阻尼
分状态过渡：关→开 与 开→关 使用不同缓动
真实交互中，“打开”和“关闭”的手感应有差异。比如打开更轻快，关闭更沉稳（带刹车感）。可利用 class 切换绑定不同 timing-function：
-
关 → 开：用
cubic-bezier(0.22, 0.61, 0.36, 1)（偏加速型） -
开 → 关：用
cubic-bezier(0.4, 0.1, 0.6, 0.9)（末端更平缓，强化刹车） - 通过 JS 在点击时添加临时 class（如
switch--on/switch--off），CSS 分别定义对应 transition
配合 transform 而非 left/top，确保高性能
滑块位移必须使用 transform: translateX()，避免触发重排：
- ❌ 错误：
left: 0px → left: 24px（触发 layout） - ✅ 正确：
transform: translateX(0) → translateX(24px)（仅合成层动画） - 同时给滑块容器加
will-change: transform（仅在 hover/active 时动态加，避免常驻开销）
进阶：用 @keyframes 实现三段式节奏（可选）
若需更精细控制（例如：0–30% 加速，30–70% 匀速，70–100% 急刹），可用 @keyframes 替代 transition：
- 定义动画：
@keyframes switchSlideIn { 0% { transform: translateX(0); } 30% { transform: translateX(12px); } 100% { transform: translateX(24px); } } - 关键在 30% 和 100% 的时间占比与 easing 组合，例如：
animation: switchSlideIn 0.3s cubic-bezier(0.1, 0.8, 0.2, 1), switchSlideIn 0.2s 0.3s cubic-bezier(0.6, 0.1, 0.8, 0.1)（分段调用不同缓动） - 注意：需用 JS 控制 animation-name 切换方向，复杂度略高，日常推荐优先用双状态 transition
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
