直接给 checkbox 加 transition 无效，因其不参与渲染；应通过 :checked 切换其他可见元素样式，滑块用 transform: translateX() + will-change: transform 实现流畅动画，轨道与滑块需分开过渡。
为什么直接给 input[type="checkbox"] 加 transition 没反应
因为 input 元素本身不参与渲染，浏览器不会对它的样式变化做重绘——哪怕你写了 input:checked { transition: all 0.3s; }，也完全无效。动画必须作用在「实际可见且参与布局」的元素上，比如 label::after、span 或自定义容器。
常见错误写法：
input:checked { transition: background-color 0.3s; } /* ❌ 无视觉效果 */正确思路是把 :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声明，避免互相干扰。分开写更可控：
.toggle { transition: background-color 0.25s ease; }
.toggle::after { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }真正容易被忽略的是：滑块的 transform 值必须精确匹配轨道内可用空间，差 1px 就会出界或留白；而 will-change 在低功耗设备上若滥用可能反而增加内存开销，只加在真正需要动画的元素上。
