表格元素不支持css动画，因浏览器对table-*盒模型动画支持极弱；应改用transform+transition逐行控制，并结合prefers-reduced-motion与devicememory动态降级。
表格本身不支持 CSS animation，强行给 <table> 或 <code><tr> 加 <code>@keyframes 在 iOS 低电量模式、安卓 4.x、旧版 Safari 下基本无效，且容易触发强制同步布局导致卡死。降级不是“关掉动画”，而是把“表格动起来”这个需求，拆解成可分层控制的 DOM 行为。
为什么 table 元素加 animation 几乎总是失效
浏览器对表格渲染有特殊优化路径：CSS 动画引擎默认跳过 <table>、<code><tr>、<code><td> 等显示为 <code>table-* 的元素。即使你写了 animation: slide-in 0.3s，Chrome DevTools 里能看到声明，但 getComputedStyle(el).animationName 返回 "none"；iOS 低电量模式下更会直接忽略整个规则块。
常见错误现象包括：
- 动画只在第一行生效，其余行静止
- 滚动后新渲染的行完全不触发动画
- 安卓 WebView 中表格区域白屏或错位
根本原因不是写法错，是浏览器内核对表格盒模型的动画支持极弱——它连 transform 都不保证能合成，更别说复杂关键帧。
用 transform 替代 animation 实现逐行入场
真正可行的方案是放弃 @keyframes，改用 transform + transition 控制单个 <tr> 的显隐与位移，再配合 JS 触发。前提是把每行包装进独立定位容器（绕过表格渲染限制）：<p>把原始结构：</p>
<pre class="brush:php;toolbar:false;"></pre>
<table><tbody>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
</tbody></table>
<p>改为语义等价但可动画的结构：</p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>然后用 CSS 控制过渡：</p>
<pre class="brush:php;toolbar:false;">.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;
}</pre>
<p>JS 触发只需：</p>
<pre class="brush:php;toolbar:false;">document.querySelectorAll('.table-row').forEach((row, i) => {
setTimeout(() => row.classList.add('entered'), i * 80);
});</pre>
<p>这样做的优势：</p>
<ul>
<li>所有浏览器都支持 <code>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 <p>如果 <code>isLowPower()</code> 返回 <code>true</code>，直接跳过所有入场动画逻辑，给所有 <code>.table-row</code> 加上 <code>entered</code> 类，且移除所有 <code>transition</code> 声明 —— 不是“禁用”，而是“不启用”。</p><p>关键细节：</p>
- 不要在降级后还保留
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' 判断是否还在动，正在动的行跳过重置，避免视觉撕裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
