Layui表格重载后自定义CSS动画丢失的解决方法

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操作都更加可靠。