如何为ngx-datatable的行添加动画效果？

直接在<ngx-datatable>标签上加动画只会作用于整个表格容器（表头、表尾属于容器的一部分），要让动画作用于每一行，你需要自定义行模板，把动画绑定到行元素上。

步骤1：定义行动画 #

在组件的@Component装饰器中定义堆叠动画，比如实现行从透明到渐显、高度展开的效果：

import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  // ...其他组件配置
  animations: [
    trigger('datatableRowAnimation', [
      transition(':enter', [
        style({ opacity: 0, height: 0 }),
        animate('300ms ease-out', style({ opacity: 1, height: '*' }))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({ opacity: 0, height: 0 }))
      ])
    ])
  ]
})

步骤2：自定义行模板并绑定动画 #

在你的模板中，添加<ngx-datatable-row-template>覆盖默认行渲染，把动画触发器加到行的根容器上：

<ngx-datatable
        #table
        [rows]="rows" 
        [columns]="columns" 
        class="bootstrap"
        [columnMode]="ColumnMode.force" 
        [footerHeight]="50" 
        rowHeight="auto"
        [count]="totalItems"
        [externalPaging]="true"
        [externalSorting]="true"
        [limit]="nbItemPerPage"
        [messages]="{emptyMessage: emptyMessage}"
        [sorts]="[{prop: 'SendAt', dir: 'desc'}]"
        (sort)="onSort($event)"
        > 
  <!-- 自定义行模板 -->
  <ngx-datatable-row-template let-row="row" let-rowIndex="rowIndex">
    <div [@datatableRowAnimation] class="datatable-row">
      <ngx-datatable-row-cell *ngFor="let column of columns; let i = index"
                              [row]="row"
                              [column]="column"
                              [rowIndex]="rowIndex"
                              [columnIndex]="i">
      </ngx-datatable-row-cell>
    </div>
  </ngx-datatable-row-template>

  <!-- 你的列定义 -->
  <ngx-datatable-column name="Date" prop="SendAt" [maxWidth]="200">
      <ng-template let-column="column" ngx-datatable-header-template>{{ column.name }}</ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row.SendAt }}
      </ng-template>
  </ngx-datatable-column>
  <!-- ...其他列 -->
</ngx-datatable>

进阶：实现行依次动画 #

如果需要让行按顺序逐个显示（而非同时触发），可以通过行索引添加动画延迟：

1. 修改动画定义，增加延迟参数：

trigger('datatableRowAnimation', [
  transition(':enter', [
    style({ opacity: 0, height: 0 }),
    animate('300ms {{delay}} ease-out', style({ opacity: 1, height: '*' }))
  ]),
], { params: { delay: '0ms' } })

2. 在模板中绑定延迟参数：

<div [@datatableRowAnimation]="{ value: '', params: { delay: rowIndex * 100 + 'ms' } }" class="datatable-row">

这样每一行会比前一行晚100ms触发动画，完美实现堆叠依次显示的效果。

内容的提问来源于stack exchange，提问作者medah