如何向 ngx-datatable 中的行添加动画？

Question

我想以堆叠方式显示数据表 (ngx) 的行：一行接着另一行。

我想补充

[@datatableAnimation]

。但我不知道在哪里添加它。 当我将其添加到

<ngx-datatable [@datatableAnimation]>

时，它仅适用于页眉和页脚

<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-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>
//...

谢谢

我搜索了文档，但找不到有关此主题的部分。

Answer 1

你需要使用Angular的动画功能。您可以在组件的 TypeScript 文件中为动画定义触发器，然后将该触发器应用于 HTML 文件中的 ngx-datatable。

在组件的 TypeScript 文件中定义动画。

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

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  animations: [
    trigger('datatableAnimation', [
      transition(':enter', [
        style({ opacity: 0, transform: 'translateY(-20px)' }),
        animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
      ]),
    ]),
  ],
})

将动画应用于 ngx-datatable-row 元素。

<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-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>
  <!-- Apply animation to ngx-datatable-row -->
  <ngx-datatable-row *ngx-datatable-row="let row; columns: columns;" [@datatableAnimation]></ngx-datatable-row>
</ngx-datatable>