角度动画触发器无法与材质表配合使用

Question

我在垫子桌上添加了淡入淡出的动画效果。但有时会弄乱表的结构。表结构保持混乱直到重新加载。 下面是mat-table html

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->
    <!-- Checkbox Column -->
    <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()">
            </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
            <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
            </mat-checkbox>
        </td>
    </ng-container>

    <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef> Date </th>
        <td mat-cell *matCellDef="let element"> {{element?.date | date :'dd MMM, yy'}} </td>
    </ng-container>
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element" [matTooltip]="element?.name?.length > 20 ? element?.name : ''"> <a href="javascript:void(0)" [routerLink]="['../details', element?._id]"> {{element?.name.substr(0, 20)}} <span
                    *ngIf="element?.name.length > 20">...</span> </a></td>
    </ng-container>


    <ng-container matColumnDef="courseType">
        <th mat-header-cell *matHeaderCellDef> Course Type </th>
        <td mat-cell *matCellDef="let element"> {{element?.courseType?.name}} </td>
    </ng-container>


    <ng-container matColumnDef="preRequisite">
        <th mat-header-cell *matHeaderCellDef> Pre-requisite </th>
        <td mat-cell *matCellDef="let element"> {{element?.preRequisite}} </td>
    </ng-container>

    <ng-container matColumnDef="duration">
        <th mat-header-cell *matHeaderCellDef> Duration </th>
        <td mat-cell *matCellDef="let element"> {{element?.duration}} </td>
    </ng-container>

    <ng-container matColumnDef="details">
        <th mat-header-cell *matHeaderCellDef> Details </th>
        <td mat-cell *matCellDef="let element"> {{element?.details}} </td>
    </ng-container>

    <ng-container matColumnDef="priceMYR">
        <th mat-header-cell *matHeaderCellDef> Pricing MYR </th>
        <td mat-cell *matCellDef="let element"> {{element?.priceMYR}} </td>
    </ng-container>

    <ng-container matColumnDef="overview">
        <th mat-header-cell *matHeaderCellDef> Overview </th>
        <td mat-cell *matCellDef="let element"> {{element?.overview}} </td>
    </ng-container>

    <ng-container matColumnDef="priceOther">
        <th mat-header-cell *matHeaderCellDef> Price Other </th>
        <td mat-cell *matCellDef="let element"> {{element?.priceOther}} </td>
    </ng-container>

    <ng-container matColumnDef="images">
        <th mat-header-cell *matHeaderCellDef> Image </th>
        <td mat-cell *matCellDef="let element">
            <img *ngFor="let img of element?.images" style="width: 30px;" [src]="host +'/'+img" />
        </td>
    </ng-container>

    <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef> Action </th>
        <td mat-cell *matCellDef="let element">
            <div class="action-btn-wrapper">
                <button mat-flat-button [routerLink]="['../edit', element?._id]" class="mr1-imp" color="primary">Edit</button>
                <button mat-stroked-button (click)="delete(element)" color="warn">Delete</button>
            </div>

        </td>
    </ng-container>



    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row [@fadeIn] *matRowDef="let row; columns: displayedColumns;"></tr> <!--fadin applied here -->
</table> 

这是我的动画触发器：

trigger('fadeIn', [
    transition('* => *', [
        query(':enter', [
            style({
                opacity: 0
            }),
            stagger(40, [
                animate('.5s ease')

            ])
        ], { optional: true })

    ])
])

这是表结构的屏幕截图：

我曾尝试更改@fadeIn指令的位置，但仍然使外观混乱。