diff --git a/src/lib/expansion/expansion-panel.html b/src/lib/expansion/expansion-panel.html index 0b21a52ab12..745d492a020 100644 --- a/src/lib/expansion/expansion-panel.html +++ b/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> diff --git a/src/lib/expansion/expansion-panel.scss b/src/lib/expansion/expansion-panel.scss index 86b46f0328e..9545932c6cc 100644 --- a/src/lib/expansion/expansion-panel.scss +++ b/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 { diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts index 0b0d367632d..98bc0f50806 100644 --- a/src/lib/expansion/expansion-panel.ts +++ b/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(); } diff --git a/src/lib/expansion/expansion.spec.ts b/src/lib/expansion/expansion.spec.ts index 47d099ebe24..c80c0aad92d 100644 --- a/src/lib/expansion/expansion.spec.ts +++ b/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);