Layui如何解决表格reload重载后自定义的CSS动画丢失-Layui教程-PHP中文网

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 时自动重走该逻辑，天然持久。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

示例：给新数据行添加入场动画

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()）——它同步执行，拿不到结果，还会阻塞渲染