tr 上设置 transition: background-color 无效，因 tr 不渲染背景色；应将 transition 应用于 td/th 元素，并显式声明初始 background-color。
直接给 tr 加 transition: background-color 大概率没反应——因为 tr 本身不渲染背景色，浏览器跳过过渡。
为什么 tr:hover + transition 常常失效
根本原因是：tr 的 display: table-row 不构成独立渲染盒，它的背景色由子元素（td/th）决定。即使你写了 tr:hover { background-color: #f0f0f0 }，这个声明在多数浏览器里会被忽略或降级为 layout 触发，而非 paint 触发，transition 自然不生效。
常见连带现象：
-
tr上写transition，控制台无报错但动画完全不播 - 用了
border-collapse: collapse，背景色过渡了，边框却“啪”一下突变 - 初始背景是
transparent或未显式声明，Safari/旧版 Chrome 插值失败，直接闪变 - 写了
transition: all 0.3s，结果 hover 时 padding、font-size 也被动参与动画，造成抖动
正确写法：把 transition 挂在 td 和 th 上
真正能平滑过渡的，是 td 和 th 这类 display: table-cell 元素。关键在于「显式初始态 + 提前声明 transition」。
推荐 CSS 片段：
table tr td,
table tr th {
background-color: #ffffff; /* 必须显式设初值，别用 transparent */
transition: background-color 0.25s ease; /* 只过渡安全属性 */
}
table tr:hover td,
table tr:hover th {
background-color: #f8f9fa;
}
注意点：
- 必须同时给
td和th写相同规则，否则表头不动 - 如果用了
border-collapse: collapse，记得给border-color也加transition，否则视觉割裂 - 避免
table-layout: fixed下同时改文字内容和背景色，Firefox 可能跳过 transition；必要时加will-change: background-color（仅 hover 前临时启用）
移动端点击没高亮？得靠 JS 补位
手机上没有 :hover，tr:hover 基本不触发。纯 CSS 无法解决「点击即高亮」的需求。
可行做法：
- 监听
touchstart，给当前行加临时 class，如tr.touched - 用
setTimeout延迟 150ms 后移除，避免误触残留 - 别用
mouseover/mouseout，它们在触屏设备上基本不触发 - 若需兼容 hover+touch 双模式，可用
@media (hover: hover)包裹纯 CSS 方案，触屏设备走 JS 分支
JS 动态更新某行后想让它“淡入”，不能只靠 transition
transition 只响应属性变化（比如 opacity、transform），对文本内容替换无效。想让新数据有入场感，得用 @keyframes + 类名切换。
示例逻辑：
td.updated {
animation: fadein 0.3s ease-out forwards;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
JS 中这样调用：
const cell = row.querySelector('td');
cell.classList.add('updated');
cell.addEventListener('animationend', () => {
cell.classList.remove('updated');
}, { once: true });
重点：动画 class 必须在 DOM 已插入且渲染后才加；否则浏览器没机会捕获起点，动画会一闪而过。
最易被忽略的一点：过渡是否生效，80% 取决于「初始样式是否显式、是否提前挂载 transition、是否避开了 layout 属性变更」——而不是动画写得有多 fancy。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
