代码之家 › 专栏 › 技术社区 › LppEdd

角度材质-可铺垫可展开行动画

angular-material angular

1

LppEdd · 技术社区 · 7 年前

目前我已经建立了一个 MatTable 使用可扩展行:

<!-- Hidden cell -->
<ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let myModel" [attr.colspan]="displayedColumns.length">
        <div
            class="detail-cell"
            [@detailExpand]="myModel.isExpanded ? 'expanded' : 'collapsed'"
        >
            <my-inner-component
                ...
            ></my-inner-component>
        </div>
    </td>
</ng-container>

行:

<!-- Hidden row -->
<tr
    mat-row
    *matRowDef="let myModel; columns: ['expandedDetail']"
></tr>

可展开行附加了一个动画:

animations: [
    trigger('detailExpand', [
        state('collapsed, void', style({ height: '0px', minHeight: '0', display: 'none' })),
        state('expanded', style({ height: '*' })),
        transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
    ])
]

因为我显示了很多行, my-inner-component 是一个很重的组件,我只希望在扩展行时创建它。
所以我补充说:

*ngIf="myModel.isExpanded"

到包含 div .

然而,很明显,动画中断了。
我怎样才能解决这个问题?如果可能的话,我想保持动画。

1 回复 | 直到 7 年前

1

2

benshabatnoam 7 年前

使用 entry / leave 转变:

TS文件中的动画:

animations: [
  trigger(
    'detailExpand', [
      transition(':enter', [
        style({ height: '0px', minHeight: '0', display: 'none' }),
        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: '*' }))
      ]),
      transition(':leave', [
        style({ height: '*' }),
        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: '0px', minHeight: '0', display: 'none' }))
      ])
    ]
  )
]

在模板中使用它:

<my-inner-component *ngIf="myModel.isExpanded" [@detailExpand]>
  ...
</my-inner-component>