单选框（radio）本身不支持 transition 动画，因其原生渲染封闭且 checked 属性不触发可插值 CSS 变更；需通过隐藏 input 并用 label 或伪元素承载过渡效果。
单选框（radio）本身不支持 transition 动画过渡 —— 因为它的视觉状态由浏览器原生控件渲染，checked 属性变化不会触发可插值的 CSS 属性变更，直接加 transition 无效。
为什么 radio 加 transition 没反应
浏览器对 input[type="radio"] 的勾选动画是封闭实现的：它不暴露 opacity、transform 等可过渡属性；appearance: none 可以隐藏原生样式，但后续自定义的“选中态”仍需手动控制，且过渡必须作用于你亲手写的伪元素或包裹元素，而非 input 本身。
- 直接写
input[type="radio"] { transition: all 0.2s; }→ 完全静默，无任何动画 - 试图用
:checked + label过渡label的background-color是可行的，但原生圆点不会动 -
display、visibility、height等不可插值属性加transition同样无效
用 label + :checked 实现可过渡的视觉反馈
真正能加过渡的是你控制的 label 或其伪元素。关键在于把「勾选状态」映射到一个可动画的载体上，比如背景色、缩放、边框或阴影。
- 必须给
input设position: absolute; opacity: 0; pointer-events: none;，让它透传点击，又不干扰样式 - 用
label包裹input和自定义内容，或用for关联 - 通过
input:checked + label或input:checked ~ label触发样式变化 - 所有
transition必须写在label（或其::before/::after）的基础状态里，不能只写在:hover或:checked下
示例（平滑背景色+缩放）：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
.radio-group input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.radio-group label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.radio-group input:checked + label {
background-color: #4A90E2;
color: white;
transform: scale(1.02);
}
用 ::before 模拟圆点并过渡其 transform/opacity
若想让“选中圆点”有入场动画，得完全放弃原生控件，用伪元素模拟，并靠 input:checked 控制其状态。
-
label::before画一个未选中的空心圆（border: 2px solid #999） -
input:checked + label::before改成实心（background-color: #4A90E2; border-color: #4A90E2;），同时加transform: scale(0)→scale(1)动画 - 过渡必须写在
label::before基础样式里：transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; - 注意：不要用
width/height过渡，会触发重排；优先用transform和opacity
关键点：伪元素的初始 transform: scale(0.85) 和结束 scale(1) 要明确，否则浏览器可能从 none 开始插值，导致动画错乱。
JS 动态设置时如何确保过渡生效
用 JS 设置 element.checked = true 后，如果 label 没动画，大概率是因为 DOM 更新和样式计算被合并了，浏览器没机会捕捉起始态。
- 不要直接设
checked后立刻加类 —— 先强制重排：void label.offsetHeight; - 再设
input.checked = true，或触发一次 class 切换（如label.classList.toggle('is-checked', true)） - 监听
transitionend时，务必过滤propertyName（如event.propertyName === 'transform'），避免多个过渡属性触发多次回调 - 移动端 Safari 对
transform过渡更敏感，建议加will-change: transform;到label，但仅在必要时，避免过度使用
最易被忽略的一点：过渡效果是否生效，和 input 是否在 DOM 中、是否被正确关联 label 强相关。哪怕漏了一个 for 属性或 id 拼写错误，:checked + label 就完全失效 —— 此时你调的不是动画，是空气。
