radio 无法直接动画，需隐藏原生控件并用 label + 伪元素模拟：设 appearance: none 隐藏 input，保持其在 DOM 中；通过 :checked + ~ 或 :checked + 选择器驱动 label 内伪元素的 transform、background 等过渡动画，配合完整 transition 声明与无障碍适配。
radio 默认样式无法直接动画，必须用 label + 伪元素覆盖
浏览器对 <input type="radio"> 的原生控件样式限制极严，:checked 状态能触发 CSS 变化，但无法给原生圆点加 transition 或 transform。真正可行的路只有一条：隐藏原生 radio，用关联的 <label></label> 模拟点击区域，并通过 ::before/::after 绘制可动画的自定义选中态。
关键操作是：input[type="radio"] { appearance: none; }（部分旧浏览器需加 -webkit-appearance 和 -moz-appearance），再用 label 的 for 属性或嵌套结构绑定点击行为。
- 务必确保
input仍保留在 DOM 中且未被display: none—— 否则屏幕阅读器和键盘导航会失效 - 推荐用
position: absolute; opacity: 0; pointer-events: none;隐藏而非移除 -
label必须包裹或显式关联input，否则点击无法触发:checked
用 :checked + ~ 选择器驱动 label 内部伪元素动画
动画本身靠的是 input:checked + label::before（相邻兄弟）或 input:checked ~ label::before（通用兄弟），配合 transform、scale、background-color 的 transition 实现。不能对 input 本身加动画，只能作用于它之后的可样式化元素。
常见动效类型：缩放圆点、环形填充、滑动指示条、颜色渐变边框。所有这些都依赖伪元素的初始/目标状态 + transition 声明。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 过渡属性要写全：
transition: background-color 0.2s ease, transform 0.25s cubic-bezier(0.68, -0.55, 0.27, 1.55); - 避免只写
transition: all，会导致意外属性变化也被动画化（比如文字颜色） - 若用
transform: scale()，注意伪元素需设display: inline-block或block，否则不生效
移动端 click 延迟与 focus-visible 兼容问题
在 iOS Safari 和部分安卓浏览器中，纯 label 点击可能触发 300ms 延迟，或焦点框（focus ring）干扰动画视觉。这不是 radio 特有，而是表单交互通病。
- 加
touch-action: manipulation;到label上可消除延迟（iOS 11.3+ / Chrome 56+） - 用
label:focus-within::before补充键盘聚焦态动画，别只响应:checked - 如果禁用了默认 focus 样式（
outline: none），必须提供替代焦点反馈，否则不符合 WCAG 2.1 - 测试时真机连上 devtools，别只靠桌面模拟器 —— 某些 transform 动画在低端安卓 WebView 里会卡顿或跳帧
Vue/React 中动态绑定容易漏掉 v-model / checked 同步逻辑
框架里写 <input type="radio" :checked="value === selected" value> 很常见，但动画是否触发，取决于 DOM 是否真实发生了 :checked 状态变更。如果只改 data 没触发重绘，伪元素不会动。
- Vue 用户优先用
v-model绑定到同一变量，比手动@change更可靠 - React 中确保
checked是受控属性（即由 state 驱动），不要混用defaultChecked - 动画 class 要基于真实 DOM 状态，别依赖组件内部 state 去 toggle 类名 —— 状态更新和 DOM 更新有微小时序差
- 如需在选中后延迟执行（比如提交前验证），记得动画完成后再调用回调，可用
getComputedStyle(el).transform或监听transitionend
:checked 的级联影响很容易被忽略。 
