checkbox 无法直接添加 transition 动画，必须通过 :checked 控制可见元素（如伪元素）的样式变化；滑块位移应使用 transform: translatex() 并配合 will-change: transform；轨道与滑块需分别设置独立 transition；原生 checkbox 需 opacity: 0 隐藏而非 display: none；label 与 input 必须正确关联以确保状态链路完整。
transition 本身不能直接作用在 input[type="checkbox"] 上实现开关动画——因为 checkbox 是不可见、不参与渲染的元素，写 input:checked { transition: all 0.3s; } 完全无效。
必须把动画交给真正可见、可定位、可变换的元素，比如 label::after 或额外包裹的 span。核心逻辑是：用 :checked 当状态钩子，只控制其他元素的样式变化。
为什么给 checkbox 写 transition 没反应
浏览器不会对 input 的视觉属性做重绘，它没有盒模型、不占布局空间、也不渲染背景或尺寸。哪怕你加了 transition，也没有「起始态」和「结束态」可过渡。
- 常见错误：
input:checked { background-color: #4CAF50; transition: background-color 0.3s; }→ ❌ 无任何动画 - 正确做法：把
transition写在伪元素或容器上，例如.toggle::after -
:checked只负责切换类名或触发兄弟/子元素样式变更，它自己不承载动画
滑块位移必须用 transform: translateX()
用 left + position: absolute 会触发 layout（重排），尤其在移动端容易卡顿；而 transform: translateX() 只影响绘制层，硬件加速支持好，iOS Safari 和 Chrome 都顺滑。
- 轨道宽 44px，滑块宽 20px，左右各留 2px 边距 →
translateX(20px)刚好让滑块右边缘对齐轨道右内边 - 务必给滑块加
will-change: transform，否则 Safari 拖拽时可能掉帧 - 不要用
margin-left或right做位移，它们同样触发重排
轨道变色和滑块位移要分开写 transition
如果共用一个 transition: all 0.25s，背景色渐变更慢、滑块位移更急，用户会觉得“断层”或“不同步”。两个动画节奏要独立控制。
- 轨道（
.toggle）用transition: background-color 0.2s - 滑块（
.toggle::after）用transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) -
cubic-bezier(0.4, 0, 0.2, 1)比ease更接近原生 iOS 弹性感 - 别忘了隐藏原生 checkbox：
input[type="checkbox"] { opacity: 0; position: absolute; }，而不是display: none（否则键盘焦点和屏幕阅读器失效）
label 结构和选择器路径稍错就失效
点击没反应、状态不更新，90% 是 HTML 或 CSS 选择器写错了。关键点不在动画本身，而在状态能否被正确捕获和传递。
-
input必须和label显式关联：要么嵌套，要么用for="id"+id匹配 - CSS 中要用相邻兄弟选择器：
input:checked + .toggle::after，不是input:checked .toggle::after -
label要设display: inline-block或inline-flex，否则宽高不生效，伪元素定位会飘 - 确保
label有足够点击热区，不要只靠文字区域——加padding或min-width
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
