Угловая анимация в строке таблицы не применяется ко всем строкам

У меня есть стандартная матовая таблица, и я применил анимацию из angular/animation API, чтобы строки скользили слева при загрузке таблицы.

таблица.html

    <table mat-table [dataSource] = "dataSource" class = "mat-elevation-z8" *ngIf = "showTable === true" 
  matSort
  matSortStart = "asc"
  matSortDirection = "asc"
  matSortActive = "brandName">

  <ng-container matColumnDef = "brandName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header><h5>Brand</h5></th>
    <td mat-cell *matCellDef = "let row">{{row.brandName}}</td>
  </ng-container>

  <ng-container matColumnDef = "name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header><h5>Account Number</h5></th>
    <td mat-cell *matCellDef = "let row">{{row.name}}</td>
  </ng-container>

  <tr mat-header-row @rowsAnimation *matHeaderRowDef = "displayedColumns"></tr>
  <tr mat-row @rowsAnimation *matRowDef = "let row; columns: displayedColumns;"></tr>
</table>

таблица.ts

@Component({
 selector: 'brand-account',
 templateUrl: 'brand-account.component.html',
 styleUrls: ['brand-account.component.scss'],
 animations: [rowsAnimation],
})
export class BpDiscountsComponent implements OnInit {

 displayedColumns: string[] = ['tradeAgreementGroupName', 'groupDiscount', 'definition'];
 dataSource: MatTableDataSource<TradeAgreement> = new 
 MatTableDataSource<TradeAgreement>();

private sort: MatSort;
@ViewChild(MatSort) set matPaginator(st: MatSort) {
 this.sort = st;
 this.setDataSourceAttributes();
}

setDataSourceAttributes() {
  this.dataSource.sort = this.sort;
}

rowsAnimation.ts

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

export const rowsAnimation = 
trigger('rowsAnimation', [
  transition('void => *', [
    style({ height: '*', opacity: '0', transform: 'translateX(-550px)', 'box-shadow': 'none' }),
    sequence([
      animate(".25s ease", style({ height: '*', opacity: '.2', transform: 'translateX(0)', 'box-shadow': 'none'  })),
      animate(".25s ease", style({ height: '*', opacity: 1, transform: 'translateX(0)' }))
    ])
  ])
]);

Сейчас анимация применяется только к нескольким случайным строкам при загрузке таблицы, а остальные просто отображаются так, как если бы анимация не применялась. Я застрял, пытаясь понять, почему он применяется только к нескольким строкам в таблице.

Любая помощь или предложения будут высоко оценены.

Обновлять Похоже, что причиной проблемы является матовая сортировка, но я не уверен, как это исправить. Файлы обновляются с помощью моего кода сортировки. Должен ли я выбирать между сортировкой и анимацией для моих строк при загрузке таблицы?