:checked + transition 失效的根本原因是浏览器对状态变更与样式计算的时序处理不同步，导致过渡起始帧被跳过；JS 直接赋值后需强制重排（如读取 offsetHeight）来“唤醒”transition。
为什么 :checked + transition 常常“动不起来”
根本原因不是动画写错了，而是浏览器对 :checked 状态变更的触发时机和重绘流程有特殊处理：状态切换是同步的，但样式计算可能被批量合并或延迟，导致过渡起始帧被跳过。尤其在快速点击、JS 手动设置 input.checked = true 后立即操作 DOM 时，极易失效。
- 纯 CSS 切换（如 label 关联）通常能触发 transition，因为浏览器隐式保障了状态与样式的时序
- JS 直接赋值
elem.checked = true后，若紧接着修改依赖:checked的兄弟元素样式（比如~ .target），该样式变更可能发生在 layout 之前，transition 拿不到旧值 -
animation（非 transition）不受此影响，但无法响应状态回退
强制重排（reflow）来“唤醒” transition
在 JS 修改 checked 后，手动触发一次同步 layout 查询，可迫使浏览器完成当前状态的样式计算，为 transition 提供合法的起始快照。
checkbox.checked = true; // 触发重排：读取一个会触发 layout 的属性 void getComputedStyle(targetElement).height;
- 常用触发属性：
offsetHeight、clientWidth、getComputedStyle(el).transform - 避免用
scrollIntoView()或focus()，它们异步且不可靠 - 如果 target 是通过
~或+选择器控制的兄弟元素，确保targetElement在调用前已存在于 DOM 且可见
用 animation 替代 transition 的适用场景
当只需单向反馈（如勾选后展开、不可逆提示），且不需要平滑回退动画时，animation 更稳定——它不依赖状态差值，只由 :checked 开关触发播放。
input:checked ~ .panel {
animation: slideIn 0.3s ease-out forwards;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
- 注意：
forwards保证动画结束态保留；若需取消时收起，得额外写input:not(:checked) ~ .panel的反向动画 - 多个状态组合（如
:checked:disabled）要显式覆盖动画，否则可能叠加冲突 - 移动端 Safari 对
animation的transform+opacity组合优化较好，比纯transition更少卡顿
真正容易被忽略的细节：label 的 click 行为与事件冒泡
很多人以为用 <label for="id"></label> 就万事大吉，但若 label 内含按钮、或绑定了 preventDefault() 的 click 处理器，:checked 可能根本不会更新——浏览器不会自动同步 input 状态。
立即学习“前端免费学习笔记（深入）”；
- 检查是否意外阻止了默认行为：
event.preventDefault()在 label 的 click 中必须慎用 - 避免在 label 上套多层事件监听器，尤其是 stopPropagation()，它会切断浏览器内部的 checked 同步链
- 调试技巧：在控制台手动执行
document.getElementById('id').checked，确认它是否真随点击变化
