表格元素不支持CSS动画，因浏览器对table-*盒模型动画支持极弱；应改用transform+transition逐行控制，并结合prefers-reduced-motion与deviceMemory动态降级。
表格本身不支持 CSS animation，强行给 <table> 或 <tr> 加 @keyframes 在 iOS 低电量模式、安卓 4.x、旧版 Safari 下基本无效，且容易触发强制同步布局导致卡死。降级不是“关掉动画”，而是把“表格动起来”这个需求，拆解成可分层控制的 DOM 行为。
为什么 table 元素加 animation 几乎总是失效
浏览器对表格渲染有特殊优化路径：CSS 动画引擎默认跳过 <table>、<tr>、<td> 等显示为 table-* 的元素。即使你写了 animation: slide-in 0.3s，Chrome DevTools 里能看到声明，但 getComputedStyle(el).animationName 返回 "none"；iOS 低电量模式下更会直接忽略整个规则块。
常见错误现象包括：
- 动画只在第一行生效，其余行静止
- 滚动后新渲染的行完全不触发动画
- 安卓 WebView 中表格区域白屏或错位
根本原因不是写法错，是浏览器内核对表格盒模型的动画支持极弱——它连 transform 都不保证能合成，更别说复杂关键帧。
立即学习“前端免费学习笔记（深入）”；
用 transform 替代 animation 实现逐行入场
真正可行的方案是放弃 @keyframes，改用 transform + transition 控制单个 <tr> 的显隐与位移，再配合 JS 触发。前提是把每行包装进独立定位容器（绕过表格渲染限制）：
把原始结构：
<table>
<tbody>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
</tbody>
</table>改为语义等价但可动画的结构：
<div class="table-wrapper">
<div class="table-row" style="transform: translateY(20px); opacity: 0;">
<div class="table-cell">A</div>
</div>
<div class="table-row" style="transform: translateY(20px); opacity: 0;">
<div class="table-cell">B</div>
</div>
</div>然后用 CSS 控制过渡：
.table-row {
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.25s;
}
.table-row.entered {
transform: translateY(0);
opacity: 1;
}JS 触发只需：
document.querySelectorAll('.table-row').forEach((row, i) => {
setTimeout(() => row.classList.add('entered'), i * 80);
});这样做的优势：
- 所有浏览器都支持
transform+opacity的硬件加速（只要不滥用will-change） - 避免触发布局抖动：不读取
offsetTop、不操作left/top - 可被
@media (prefers-reduced-motion: reduce)统一接管：在媒体查询中设transition: none即可秒切静态态
低功耗设备自动降级的检测与开关
不能靠 UA 字符串猜机型，要结合轻量指标实时判断：
在页面初始化时运行一次检测逻辑：
const isLowPower = () => {
// 1. 系统级偏好优先
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return true;
// 2. 内存线索（Chrome/Edge 支持）
if ('deviceMemory' in navigator && navigator.deviceMemory <= 2) return true;
// 3. CPU 线索（部分安卓 WebView 可读）
if ('hardwareConcurrency' in navigator && navigator.hardwareConcurrency <= 2) return true;
// 4. 已知低配 UA 片段（兜底）
const ua = navigator.userAgent;
return /Mi|HUAWEI.*MLA|ZTE.*V8|Android\s+4\./i.test(ua);
};如果 isLowPower() 返回 true，直接跳过所有入场动画逻辑，给所有 .table-row 加上 entered 类，且移除所有 transition 声明 —— 不是“禁用”，而是“不启用”。
关键细节：
- 不要在降级后还保留
transition: all 0.3s，这会让 JS 判断动画完成事件（如transitionend）永远不触发 - 避免用
setTimeout模拟动画节奏，低功耗设备定时器精度差，可能批量触发或延迟数秒 - 如果表格内容来自接口，降级状态下应跳过“逐行延迟”，直接
render()完整 DOM
表格排序/筛选时的动画状态重置陷阱
用户点击表头排序后，若仍沿用原 .entered 类，新插入的行不会动，已有的行也不会重新入场 —— 因为类名没变，transform 值也没变，浏览器认为“无需重绘”。
正确做法是每次数据变更后，先清除所有行的动画状态：
function resetTableAnimation() {
document.querySelectorAll('.table-row').forEach(row => {
row.classList.remove('entered');
// 强制重排，让浏览器重置 transform 状态
void row.offsetWidth;
});
}然后再按新顺序逐行添加 entered 类。注意：void row.offsetWidth 是必须的，否则 Chrome 和 Safari 会跳过重绘。
最容易被忽略的是：当用户快速连续点击排序，JS 可能还没处理完上一轮动画，下一轮就来了。此时要用 getComputedStyle(row).transform !== 'none' 判断是否还在动，正在动的行跳过重置，避免视觉撕裂。
