直接给 checkbox 加 transition 无效，因其不参与渲染；动画需作用于 label::after 等可见元素；滑块位移应优先用 transform: translateX() 并配 will-change: transform，轨道与滑块过渡需分离设置。
为什么直接给 input[type="checkbox"] 加 transition 没反应
因为 input 元素本身不参与渲染，浏览器不会对它的样式变化做重绘——哪怕你写了 input:checked { transition: background-color 0.3s; }，也完全无效。动画必须作用在「实际可见且参与布局」的元素上，比如 label::after、span 或自定义容器。:checked 只是状态钩子，用来切换其他元素的样式，它自己不承载动画。
transform: translateX() 是滑块位移最稳的选择
用 left + position: absolute 做滑块移动会触发 layout（重排），动画容易卡顿；而 transform: translateX() 只影响绘制层，硬件加速支持好，iOS Safari 和 Chrome 都顺滑。
- 滑块宽度 20px，轨道总宽 44px，左右各留 2px 边距 →
translateX(20px)刚好让滑块右边缘对齐轨道右内边 - 务必给滑块元素加
will-change: transform，尤其在 Safari 上，否则拖拽时可能掉帧 - 过渡曲线建议用
cubic-bezier(0.4, 0, 0.2, 1)，比ease更接近原生 iOS 的弹性感
label 结构和选择器路径不能错
点击区域失效、状态不响应，90% 是 HTML 结构或 CSS 选择器写错了。
-
input必须和label显式关联：要么用for="id"+id匹配，要么把input直接嵌套进label里 - CSS 中要用相邻兄弟选择器
+或通用兄弟选择器~，例如：input:checked + .toggle::after -
label必须设display: inline-block或inline-flex，否则宽高不生效，伪元素定位会飘 - 别忘了隐藏原生 checkbox：
input[type="checkbox"] { opacity: 0; position: absolute; }，而不是display: none（否则键盘焦点和屏幕阅读器会丢失）
轨道变色和滑块位移要分开过渡
只给滑块加动画，轨道背景色突变，用户会觉得“断层”；只给轨道加动画，滑块瞬间跳过去，也不自然。
立即学习“前端免费学习笔记（深入）”；
- 轨道（track）用
background-color过渡，时长建议 0.2–0.25s - 滑块（thumb）用
transform: translateX()过渡，时长略短（0.2–0.25s），并配will-change: transform - 两个动画不要共用同一个
transition声明，避免互相干扰
will-change: transform 和 label 的 display 类型——前者在 Safari 上不加就掉帧，后者不设就导致伪元素定位漂移，连带整个开关失灵。 
