如何在Angular材质垫表行中添加交错动画？

问题描述

我有一个这样的角度表：

<table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>name</th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>

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

在我的组件中：

const fadeOut =
  trigger('fadeOut',[
    state('void',style({background: 'pink',borderBottomColor: 'pink',opacity: 0,transform: 'translateX(-550px)','Box-shadow': 'none'})),transition('void => *',sequence([
      animate('.5s ease')
    ])),transition('* => void',[animate('5s ease')])
  ])

@Component({
  selector: 'app-comp',templateUrl: './comp.component.html',styleUrls: ['./comp.component.sass'],animations: [fadeOut],})
export class Comp {
  displayedColumns: string[] = ['name']
  dataSource: MatTableDataSource<any> = new MatTableDataSource<any>([
   {name: 'aaa'},{name: 'aaa'},{name: 'aaa'}
  ])

我想以交错动画为表格中的项目设置动画，其中每个项目将在前一个项目之后逐渐淡入。现在，所有行都同时执行动画查询，而不会出现混乱。

我该怎么做？ （我不知道在哪个HTML元素上使用angular的stagger函数）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）