transition 可为 background-color 添加平滑过渡，但需满足三个条件：表格已渲染、颜色值格式统一、切换不触发重排或强制重绘丢失。
transition 不能直接为 background-color 切换添加平滑过渡——但可以，前提是满足三个硬性条件：表格元素必须已渲染、颜色值格式统一、且切换方式不触发重排或强制重绘丢失。
为什么直接写 transition: background-color 0.3s 常常失效
常见现象是：点击按钮后背景“啪”一下跳变，毫无过渡。根本原因不是 CSS 写错了，而是以下任一情况发生：
-
background-color从transparent或未声明值（如 inherited）切换到具体色值时，浏览器可能无法插值计算中间状态 - 表格用了
border-collapse: collapse，且设置了border-color，而 border 颜色未同步声明 transition，导致整体重绘被阻断 - 通过 JS 直接改
element.style.backgroundColor = 'red'，绕过了 class 切换，CSS 过渡规则未命中 - 父容器或自身有
will-change: transform等合成层提示，但未配backface-visibility: hidden，某些浏览器（尤其 Safari）会禁用部分属性过渡
必须用 class 切换，且颜色格式严格一致
过渡只在 class 间切换时可靠生效，且起始/结束色值必须同格式（全用 hex / 全用 rgb / 全用 hsl）。混用 #fff 和 rgb(255,255,255) 会导致过渡中断。
- ✅ 正确：
.table-light { background-color: #f8f9fa; } .table-dark { background-color: #343a40; } - ❌ 危险：
.table-dark { background-color: rgb(52, 58, 64); }—— 即使数值相同，格式不一致就可能跳帧 - JS 触发必须用：
tableEl.classList.replace('table-light', 'table-dark')，而非tableEl.style.backgroundColor = ... - CSS 中显式声明：
table { transition: background-color 0.3s ease; }，避免transition: all（它会拖慢性能，且对background-image等无效属性做无谓监听）
表格行（<tr>）或单元格（<td>）单独加过渡更可控
整张 <table> 加背景过渡容易受边框、padding、嵌套结构干扰；对 <tr> 或 <td> 应用更稳定，也支持悬停逐行高亮等交互。
- 给每行加 hover 过渡：
tr:hover { background-color: #e9ecef; transition: background-color 0.2s ease-in-out; } - 注意清除默认边框影响：
border-collapse: separate下，tr的背景会被td的 border 遮盖，建议统一设border: none或用box-shadow模拟分隔 - 若需兼容旧版 Safari（iOS 15.4 及更早），加一句：
tr { -webkit-backface-visibility: hidden; } - 避免在
td上同时过渡background-color和transform—— GPU 合成层冲突可能导致闪烁
动态插入行时，过渡不触发？执行 void el.offsetWidth
用 JS 动态追加 <tr> 后立即切换 class，动画常不启动。这是因为浏览器尚未完成 layout，过渡起点不可知。
立即学习“前端免费学习笔记（深入）”；
- 正确顺序：
newTr.classList.add('new-row'); void newTr.offsetWidth; // 强制重排，让浏览器“记住”初始状态 newTr.classList.add('highlight'); -
void el.offsetWidth是最轻量的强制重排方式，比getComputedStyle开销小 - 这个技巧对所有通过 JS 插入后立即触发动画的场景都适用，不只是表格
- 如果用了
requestAnimationFrame包裹 class 切换，也可替代，但不如offsetWidth确定
