Layui表格reload后CSS动画丢失：本质是DOM重建导致样式链断裂
当你执行table.reload()时，Layui会直接清空.layui-table-body内的所有内容，随后重新渲染每一行tr和td。这意味着之前通过class添加的动画（如.animate-row）或内联style中的animation属性，全部会在这次重建中消失——并非动画“失效”，而是根本未被写入新的DOM结构中。
避免在done回调中手动添加animation类
许多开发者习惯这样写：
done: function() {
layui.$('.layui-table-body tr').addClass('animate-row');
}
表面上可行，但一旦分页、排序或再次reload，该逻辑立即失效；而且DOM尚未完全稳定——虚拟滚动模式下，tr是懒加载的，执行时机完全不可控。更严重的是，这种操作与Layui内部的重绘节奏冲突，刚添加的类可能瞬间被覆盖。
- 动画类必须在每行渲染完成前绑定，而非事后“打补丁”
done是整表渲染完毕的钩子，此时tr已存在，但后续交互（如点击排序）仍会触发局部重绘，该回调不会重复执行- 若使用了
skin: 'row'或skin: 'line'，tr结构会存在差异，手动选中逻辑容易遗漏节点
正确方案：通过rowStyle注入animation内联样式
rowStyle在每个tr渲染前执行，返回的样式对象直接写入tr的style属性。reload时自动重新执行该逻辑，天然持久，完全不受重绘干扰。
示例：为新数据行添加入场动画
rowStyle: function(row, index) {
// 仅对新增/更新行施加动画（避免每次reload都闪烁）
if (row._isNew) {
return {
'animation': 'slideIn 0.4s ease-out forwards',
'opacity': '0'
};
}
}
- 确保CSS动画关键帧已经全局定义：
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } - 必须显式设置
opacity: '0'，否则动画起始状态不一致，容易出现“闪一下”现象 - 不要依赖
index判断是否为新行——index只是当前页的序号，并非数据唯一标识；应由后端或JS在数据中标记（如_isNew: true） - 如需区分不同状态的动画（如success/error行），仍用同一个函数合并返回，避免多次return相互覆盖
动画卡顿或闪烁？检查loading状态与过渡时机
reload过程中表格先清空再填充，视觉上表现为“白屏→闪现”，动画根本来不及触发。这并非动画本身的问题，而是节奏未对齐。
- 关闭默认loading：
loading: false，并在before钩子中插入一个带动画的遮罩层 - 给表格容器添加CSS过渡：
.layui-table-view { transition: opacity 0.15s ease; }，在before中设置opacity: 0.7，done中恢复1 - 避免在
rowStyle中读取异步状态（如await checkPermission()）——它是同步执行的，无法获取结果，还会阻塞渲染
真正困难的不在于添加动画，而在于让动画只在合适的时机出现、且不被重绘打断。将逻辑置于rowStyle中，比任何直接的DOM操作都更加可靠。
