怎么使用CSS3实现开关Toggle Switch组件的滑动回弹-css教程-PHP中文网

纯css toggle switch的“滑动回弹”是伪元素通过transform+弹性贝塞尔曲线模拟的视觉错觉，并非真实物理回弹；其失效主因是transition未锁定transform、left混用单位、user-select未禁用或ios对cubic-bezier超出[0,1]范围支持不稳定。

怎么使用css3实现开关toggle switch组件的滑动回弹

为什么纯CSS实现的Toggle Switch会有滑动回弹问题

浏览器原生的 checkbox 没有滑动行为，所谓“滑动回弹”，其实是用 label + input[type="checkbox"] 配合伪元素模拟出来的视觉反馈。回弹感不是CSS动画自带的物理效果，而是靠 transition 在状态切换时对 transform 或 left 属性做缓动过渡，再配合 ease-in-out 这类缓动函数模拟出的“弹性”错觉。

真正容易出问题的地方在于：过渡属性没锁定、伪元素定位脱离文档流后 left 值计算错误、或者未禁用用户选中导致点击偏移。

必须设置的CSS transition 和 transform 组合

回弹感的核心是让滑块（通常是 ::after）在状态切换时平滑移动并带缓动。只写 transition: left 0.3s 是不够的——它在不同浏览器下表现不一致，且无法触发硬件加速。

必须用 transform: translateX() 替代 left，避免重排，保证60fps
过渡属性要精确到具体值：transition: transform 0.25s cubic-bezier(0.54, 1.5, 0.38, 1.2)（这个贝塞尔曲线比 ease-in-out 更接近“回弹”）
transform 必须作用在伪元素上，且父容器（label）设为 position: relative

示例关键片段：

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.54, 1.5, 0.38, 1.2);
}
.toggle-switch input:checked + .toggle-switch::after {
  transform: translateX(24px);
}