layui table 动画

可以通过使用 layui 的动画库来实现表格的动画效果。具体步骤如下：

1. 引入 layui 的动画库

在页面中引入 layui 的动画库文件：

<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css">
<script src="//res.layui.com/layui/dist/layui.js"></script>

2. 编写表格的 HTML 代码

在页面中编写表格的 HTML 代码，例如：

<table class="layui-table" lay-skin="line">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

3. 使用动画效果

通过 JavaScript 代码来给表格添加动画效果，例如：

layui.use(['table', 'layer', 'jquery'], function () {
  var table = layui.table;
  var layer = layui.layer;
  var $ = layui.jquery;

  var index = layer.load(1);

  setTimeout(function () {
    layer.close(index);
  }, 1000);

  table.render({
    elem: '#table',
    url: '/api/table',
    cols: [[
      {field: 'name', title: '姓名'},
      {field: 'age', title: '年龄'},
      {field: 'city', title: '城市'}
    ]],
    done: function (res, curr, count) {
      $('.layui-table tbody tr').each(function (index) {
        $(this).addClass('layui-anim layui-anim-up layui-anim-delay-' + (index * 100));
      });
    }
  });
});

在上面的代码中，我们使用了 layui 的表格组件来渲染表格，并在表格渲染完成后给每一行添加了动画效果。具体来说，我们在 `done` 回调函数中使用了 jQuery 的 `each` 方法遍历了所有的表格行，然后通过 `addClass` 方法给它们添加了动画类名。

其中 `layui-anim-up` 是动画效果名称，表示向上滑动；`layui-anim-delay-` 是动画延迟时间，它的值为当前行的索引乘以 100，表示每一行的动画都延迟一定的时间开始执行。