[英]Angular Material - MatTable expandable row animation
目前,我已經建立了帶有可擴展行的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
。
但是,顯然動畫會中斷。
我怎么解決這個問題? 如果可能的話,我想保持動畫。
使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.