fix(expansion-panel): correct jump in panel sizing during animation (#12509)

Author: josephperrott

src/lib/expansion/expansion-panel.html

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

src/lib/expansion/expansion-panel.scss

@@ -9,6 +9,7 @@
   display: block;
   margin: 0;
   border-radius: $border-radius;
+  overflow: hidden;
   transition: margin 225ms $mat-fast-out-slow-in-timing-function,
       mat-elevation-transition-property-value();
 
@@ -40,11 +41,9 @@
 }
 
 .mat-expansion-panel-content {
-  overflow: hidden;
-
-  &.mat-expanded {
-    overflow: visible;
-  }
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
 }
 
 .mat-expansion-panel-body {

src/lib/expansion/expansion-panel.ts

@@ -170,21 +170,8 @@ export class MatExpansionPanel extends CdkAccordionItem implements AfterContentI
   }
 
   _bodyAnimation(event: AnimationEvent) {
-    const classList = event.element.classList;
-    const cssClass = 'mat-expanded';
     const {phaseName, toState, fromState} = event;
 
-    // Toggle the body's `overflow: hidden` class when closing starts or when expansion ends in
-    // order to prevent the cases where switching too early would cause the animation to jump.
-    // Note that we do it directly on the DOM element to avoid the slight delay that comes
-    // with doing it via change detection.
-    if (phaseName === 'done' && toState === 'expanded') {
-      classList.add(cssClass);
-    }
-    if (phaseName === 'start' && toState === 'collapsed') {
-      classList.remove(cssClass);
-    }
-
     if (phaseName === 'done' && toState === 'expanded' && fromState !== 'void') {
       this.afterExpand.emit();
     }

src/lib/expansion/expansion.spec.ts

@@ -28,19 +28,16 @@ describe('MatExpansionPanel', () => {
 
   it('should expand and collapse the panel', fakeAsync(() => {
     const fixture = TestBed.createComponent(PanelWithContent);
-    const contentEl = fixture.nativeElement.querySelector('.mat-expansion-panel-content');
     const headerEl = fixture.nativeElement.querySelector('.mat-expansion-panel-header');
     fixture.detectChanges();
 
     expect(headerEl.classList).not.toContain('mat-expanded');
-    expect(contentEl.classList).not.toContain('mat-expanded');
 
     fixture.componentInstance.expanded = true;
     fixture.detectChanges();
     flush();
 
     expect(headerEl.classList).toContain('mat-expanded');
-    expect(contentEl.classList).toContain('mat-expanded');
   }));
 
   it('should be able to render panel content lazily', fakeAsync(() => {
@@ -267,23 +264,7 @@ 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');
-  }));
 
   it('should emit events for body expanding and collapsing animations', fakeAsync(() => {
     const fixture = TestBed.createComponent(PanelWithContent);