Layui如何解决表格reload重载后自定义CSS动画丢失

CSS动画丢失本质是reload导致DOM重建使样式链断裂；应使用rowStyle在每行渲染前注入animation内联样式，而非done回调中手动添加类。

reload后CSS动画丢失，本质是DOM重建导致样式链断裂

表格调用 table.reload() 时，layui 会清空整个 .layui-table-body 并重新渲染所有 tr 和 td。你之前靠 class 添加的动画（比如 .animate-row）或内联 style 中的 animation 属性，全部被丢弃——不是“失效”，是根本没再写进去。

别在 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 操作都可靠。