transition应加在视觉替代元素（如label内的::before或span）上，而非input本身；需在常态样式中定义可动画属性（如transform、opacity），并确保html结构满足:checked + .target或:checked ~ .target选择器匹配。
transition 要加在谁身上？不是 input，而是它的视觉替代元素
直接给 input[type="checkbox"] 加 transition 没用——它本身不可见，也不支持动画属性（比如 opacity、transform）。真正需要过渡效果的是你用来“代表”它的那个元素，通常是 label 里的伪元素（如 ::before）或子元素（如 span、div）。
常见错误是把 transition 写在 .checkbox-input:checked 上，结果毫无反应。正确做法是：让视觉层具备可动画的 CSS 属性，并把 transition 定义在该元素的「常态」样式中（即未选中时就声明好），这样状态切换时浏览器才能插值过渡。
- ✅ 正确：
label .toggle-slider { transition: background-color 0.3s, transform 0.3s; } - ❌ 错误：
input:checked + label .toggle-slider { transition: ... }（过渡定义太晚，不生效） - ⚠️ 注意：如果用
opacity控制显隐，别只写opacity过渡，要搭配visibility或pointer-events才能避免点击穿透
:checked + 相邻选择器触发时机是否可靠？
是的，:checked + label 或 :checked ~ .control 是纯 CSS 切换的核心机制，只要 HTML 结构满足「复选框紧邻目标元素」，浏览器会实时响应状态变化，无需事件监听或重排强制。
但要注意两个易错点：
- 复选框必须和目标元素在同一层级且相邻（用
+），或同级后序（用~）；嵌套在label内部时，结构常为<label><input><span class="ui"></span></label>，此时要用input:checked + .ui，不能漏掉+ - 如果复选框被
display: none隐藏，仍可触发:checked，但若用visibility: hidden或opacity: 0，需确保它仍占据文档流，否则+选择器可能失效 - 移动端 Safari 对
:checked + *的响应偶尔有 1 帧延迟，可加will-change: opacity微调
哪些 CSS 属性能被 transition 平滑过渡？
不是所有属性都支持过渡。对复选框 UI 来说，最常用且兼容性好的有：
-
opacity：适合淡入淡出、图片变灰等效果（如img { opacity: 0.5; }） -
background-color/border-color：用于开关背景色、边框高亮 -
transform（尤其是translateX()、scale()）：实现滑块位移、勾选缩放脉冲，性能最优 -
box-shadow：增强按下反馈或焦点提示 - ⚠️ 避免用
height、width、top/left等触发布局重排的属性，会导致卡顿；改用transform: scaleY(0)替代height: 0
为什么有时候 transition 看不到动效？
最常见原因是状态切换前后，目标属性值没发生「可计算的变化」。比如：
- 想让勾选时图标旋转，但写了
transform: rotate(0deg)→rotate(360deg)，实际浏览器可能优化掉整圈旋转；应改用rotate(180deg)或加transform-origin明确轴心 - 颜色过渡用了命名色（如
red→green），某些旧版浏览器不支持，建议统一用rgb()或hsl() - 过渡时间设得太短（如
0.05s），人眼无法识别；或太长（如2s）导致交互迟滞，推荐0.2s–0.4s区间 - 父容器有
overflow: hidden且子元素transform超出边界，动画会被裁剪——检查是否需要加transform: translateZ(0)强制 GPU 加速
复杂交互动效里，transition 只负责「状态之间」的补间；真要控制起始/结束形态或循环节奏，得靠 @keyframes + animation，那是另一层需求了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
