table 和 tr 无法直接通过 transition 实现位移动画，因其 display: table/table-row 不构成独立渲染盒，浏览器不计算 layout 坐标差；只有 td/th 支持 transform 过渡，需为每个单元格添加 transition 并应用 transform 动画。
table 和 tr 不能直接加 transition 实现位移
直接给 <table> 或 <code><tr> 设置 <code>transition: transform 0.3s 不会生效——因为它们默认是 display: table / display: table-row，不构成独立渲染盒，浏览器根本不计算其 layout 坐标差，也就没法补间位移。你看到的“没动画”不是延迟问题，而是根本没启动过渡。
真正能触发平滑位移的只有 td/th + transform
想让某行“上浮填补空缺”，必须把位移动画落在每个单元格上，而不是整行。因为 <td> 和 <code><th> 是 <code>display: table-cell，支持 transform 且能参与 layout 计算：
- 给每个
<td> 加 <code>transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) - 删除前，为该行所有
<td> 添加类（如 <code>removing），并设transform: translateY(-20px) scale(0.98) - 监听
transitionend时严格校验e.propertyName === 'transform'，再执行row.remove() - 避免给
<tr> 设 <code>position: relative或transform，否则会干扰表格内部 layout 对齐用 View Transitions API 实现自动位移（仅 Chromium）
如果你只面向 Chrome/Edge 111+，可以用原生位移补间，但必须满足硬性条件：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件下载如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 每行
<tr> 必须有稳定唯一的 <code>data-view-transition-name="row-123" - 删除操作必须包裹在
document.startViewTransition(() => { ... })中 - 父
<table> 不能有 <code>transform、position: absolute或overflow: hidden - 运行时检测：
if ('startViewTransition' in document)，不要依赖 UA 字符串 - Firefox/Safari 完全不支持，降级方案只能回到
<td> + <code>transform手动模拟侧滑删除时表格项错位的根源与解法
侧滑菜单常导致邻行跳动或挤压，问题不在动画本身，而在布局干扰：
- 别用
margin-left或left推内容层——这会触发重排，破坏表格行高一致性 - 内容容器（如
<div class="content">）应只用 <code>transform: translateX(-60px) <tr> 必须设 <code>overflow: hidden，否则滑出的按钮会撑破边界，顶开下一行- 删掉行后，若表格高度突变，可临时加
min-height锁定 tbody 高度，避免页面抖动
实际中最容易被忽略的，是表格元素的 display 类型和 layout 触发机制——它不像普通块元素那样“听话”。哪怕写对了 transition，只要目标元素没进入独立渲染流程，位移就只是幻觉。
- 别用
- 每行
