transition必须定义在基础状态而非:hover中，否则移出无动画；优先使用transform和opacity避免重排；js动态操作需强制重排触发过渡起点；监听transitionend时应过滤属性名或统一延时清理。
transition写在表格行或单元格的默认样式里，不是:hover里
很多人给
transition塞进去，结果只有鼠标移入有动画，移出直接“啪”一下跳回。根本原因是transition必须定义在基础状态（比如.table-row），才能覆盖进入和离开两个方向。一旦只写在:hover里，移出时规则消失，浏览器立刻回退到初始值，不走过渡。
正确做法是：.table-row { transition: background-color 0.2s ease, transform 0.2s ease; }，再配合.table-row:hover { background-color: #f0f9ff; transform: scale(1.01); }。注意：transform必须有明确初始值（比如没写就是transform: none），否则移出时可能残留计算值，导致下一次悬停起点不准。
优先用transform和opacity，别碰width/height/margin
表格里最常踩的坑是给td加transition: width 0.3s——它会触发重排（layout），滚动卡顿、动画掉帧几乎是必然的。真正安全的属性只有transform（位移/缩放/旋转）和opacity，它们走 GPU 合成层，不干扰布局。
-
transform: translateY(2px)比margin-top: 2px更稳，且支持硬件加速 - 想高亮整行？用
opacity: 0.95 → 1，别用border-bottom或box-shadow，后者可能触发重绘抖动 - 避免
transition: all——它会偷偷监听font-size、padding等不可控属性，反而拖慢渲染
JS动态增删行时，transition不生效？先强制重排
用insertRow()或innerHTML插入新行后直接加.fade-in类，动画经常“一闪而过”或根本不播。这是因为浏览器把DOM插入和样式变更合并为一次渲染，没机会触发过渡起点。
解决方法很简单：在加类前读一次布局属性，强制触发重排：
const newRow = table.insertRow();
newRow.classList.add('fade-in');
void newRow.offsetHeight; // 关键：强制重排，让浏览器记住初始态
newRow.classList.add('fade-in-active');
如果表格用了display: table-row以外的显示模式（比如flex模拟表格），更要检查父容器是否设置了will-change: transform——iOS Safari 下没这句，transform动画可能被降级为软件渲染。
多列排序或筛选时，transitionend事件容易误触发
一行同时过渡opacity和transform，transitionend会发两次。如果监听后立刻移除类或更新数据，很可能transform还没结束，opacity就清掉了，视觉上就是“半截动画”。
稳妥做法是过滤属性名，且只处理目标属性：
row.addEventListener('transitionend', e => {
if (e.propertyName === 'transform') {
// 动画真正完成才执行后续逻辑
row.classList.remove('sorting-active');
}
});
更保险的替代方案：统一所有过渡时长（比如都设0.25s），用setTimeout延时清理，避开事件竞态。复杂交互中，这点微小延迟比监听事件更可靠。
真正难的不是写几行transition，而是确保每次DOM变化都带着可预测的初始态和明确的目标态——表格结构固定、样式隔离、JS操作克制，动画才不会在某个Chrome版本或某台iPad上突然失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
