解决Angular中mat-expansion-panel动画导致先展后折的问题

问题分析 #

当前代码中，mat-expansion-panel在页面加载或新增条目时，会先呈现展开状态，动画结束后才切换为折叠状态。原因是入场动画直接控制整个面板的高度从0px过渡到*，而面板的默认折叠逻辑（隐藏内容区域）在动画完成后才生效，导致视觉冲突。

解决方案 #

1. 为条目添加展开状态标记

修改TypeScript代码，给每个条目新增expanded属性并默认设为false，确保初始和新增条目都处于折叠状态：

items = [
    { title: 'Item 1', description: 'Description of item 1', content: 'Content of item 1', expanded: false },
    { title: 'Item 2', description: 'Description of item 2', content: 'Content of item 2', expanded: false },
    { title: 'Item 3', description: 'Description of item 3', content: 'Content of item 3', expanded: false }
];

onAddEntryClicked() {
    this.items.push({
        title: 'title',
        description: 'description',
        content: 'content',
        expanded: false
    });
}

2. 绑定面板展开状态到条目属性

在HTML中，将mat-expansion-panel的expanded状态与条目属性双向绑定，确保面板状态和数据同步：

<mat-accordion>
    <mat-expansion-panel 
        *ngFor="let item of items" 
        [(expanded)]="item.expanded"
        [@itemAnimation]="item.expanded ? 'expanded' : 'collapsed'">
        <mat-expansion-panel-header>
            <mat-panel-title>{{item.title}}</mat-panel-title>
            <mat-panel-description>{{item.description}}</mat-panel-description>
        </mat-expansion-panel-header>
        <p>{{item.content}}</p>
    </mat-expansion-panel>
</mat-accordion>

<button id="add-entry" (click)="onAddEntryClicked()" type="button">添加条目</button>

3. 重构动画逻辑，基于状态切换而非全局入场事件

修改动画配置，定义collapsed和expanded两种状态，让动画仅在状态切换时触发，避免初始加载的视觉冲突：

animations: [
    trigger('itemAnimation', [
        // 折叠状态：匹配面板头部高度，隐藏内容区域
        state('collapsed', style({
            height: '48px', // 可根据实际头部高度调整
            opacity: 1,
            overflow: 'hidden'
        })),
        // 展开状态：显示完整面板高度
        state('expanded', style({
            height: '*',
            opacity: 1,
            overflow: 'visible'
        })),
        // 展开/折叠切换动画
        transition('collapsed <=> expanded', animate('500ms ease-in-out')),
        // 新增条目入场动画：从完全隐藏过渡到折叠状态（仅显示头部）
        transition(':enter', [
            style({ height: '0px', opacity: 0 }),
            animate('500ms ease-in-out', style({ height: '48px', opacity: 1 }))
        ]),
        // 删除条目离场动画
        transition(':leave', [
            animate('500ms ease-in-out', style({ height: '0px', opacity: 0 }))
        ])
    ])
]

4. 可选：关闭初始加载动画

如果希望页面加载时现有条目直接显示折叠状态，无需入场动画，可添加trackBy函数：

在TS中添加：

trackByItem(index: number, item: any) {
    return item.title; // 使用条目唯一标识字段
}

HTML中更新*ngFor：

*ngFor="let item of items; trackBy: trackByItem"

效果说明 #

调整后，页面加载的现有条目会直接以折叠状态显示，新增条目时会从完全隐藏平滑过渡到折叠状态（仅显示头部），不会再出现先展开后折叠的视觉问题。

内容的提问来源于stack exchange，提问作者Dvora