fix(expansion-panel): entire body content being shown on animation st…

…art (#10138)

Fixes expansion panels becoming `overflow: visible` as soon as their expansion animation starts, causing them to show the entire content before they're done animating. It seems like we were setting the `mat-expanded` class both through the view and manually when the animation is done.

Fixes #10134.

src/lib/expansion/expansion-panel.html

@@ -4,7 +4,6 @@
      [@bodyExpansion]="_getExpandedState()"
      (@bodyExpansion.done)="_bodyAnimation($event)"
      (@bodyExpansion.start)="_bodyAnimation($event)"
-     [class.mat-expanded]="expanded"
      [attr.aria-labelledby]="_headerId"
      [id]="id"
      #body>

src/lib/expansion/expansion.spec.ts

@@ -246,6 +246,24 @@ describe('MatExpansionPanel', () => {
     expect(fixture.componentInstance.expanded).toBe(false);
   });
 
+  it('should not set the mat-expanded class until the open animation is done', fakeAsync(() => {
+    const fixture = TestBed.createComponent(PanelWithContent);
+    const contentEl = fixture.nativeElement.querySelector('.mat-expansion-panel-content');
+
+    fixture.detectChanges();
+    expect(contentEl.classList).not.toContain('mat-expanded',
+        'Expected class not to be there on init');
+
+    fixture.componentInstance.expanded = true;
+    fixture.detectChanges();
+    expect(contentEl.classList).not.toContain('mat-expanded',
+        'Expected class not to be added immediately after becoming expanded');
+
+    flush();
+    expect(contentEl.classList).toContain('mat-expanded',
+        'Expected class to be added after the animation has finished');
+  }));
+
   describe('disabled state', () => {
     let fixture: ComponentFixture<PanelWithContent>;
     let panel: HTMLElement;