diff --git a/src/lib/expansion/expansion-panel.html b/src/lib/expansion/expansion-panel.html
index 7b1f7ccdc645..0b21a52ab126 100644
--- a/src/lib/expansion/expansion-panel.html
+++ b/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>
diff --git a/src/lib/expansion/expansion.spec.ts b/src/lib/expansion/expansion.spec.ts
index f2017beaf9e9..914dd95a2a8f 100644
--- a/src/lib/expansion/expansion.spec.ts
+++ b/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;