diff --git a/src/lib/expansion/expansion-panel-header.scss b/src/lib/expansion/expansion-panel-header.scss
index b2f3642b584e..6e432cce7071 100644
--- a/src/lib/expansion/expansion-panel-header.scss
+++ b/src/lib/expansion/expansion-panel-header.scss
@@ -19,6 +19,19 @@
   &:not([aria-disabled='true']) {
     cursor: pointer;
   }
+
+  // If the panel, that the header is in, is inside an element being animated by Angular,
+  // the default behavior is to block all child animations. This means that the header's
+  // height won't kick in until the parent animation is done. We add a fallback to the
+  // header's default height. If the animations aren't blocked, these styles will be overridden
+  // by the inline styles from the animations module.
+  .ng-animating .mat-expansion-panel & {
+    min-height: 48px;
+  }
+
+  .ng-animating .mat-expansion-panel.mat-expanded & {
+    min-height: 64px;
+  }
 }
 
 .mat-content {
diff --git a/src/lib/expansion/expansion-panel.scss b/src/lib/expansion/expansion-panel.scss
index 9545932c6cc1..632c6fb6617b 100644
--- a/src/lib/expansion/expansion-panel.scss
+++ b/src/lib/expansion/expansion-panel.scss
@@ -44,6 +44,18 @@
   display: flex;
   flex-direction: column;
   overflow: visible;
+
+  // If the expansion panel is inside an element being animated by Angular,
+  // the default behavior is to block all child animations. This means that the
+  // default `height: 0` won't kick in until the parent animation is over, which
+  // will cause the panel to appear open, before it snaps into place. We don't want
+  // to set the default height to zero, because it'll break the `height: '*'` from
+  // the animation definitions. Instead we add a fallback that only applies only if
+  // it's inside a parent that is mid-animation.
+  .ng-animating .mat-expansion-panel:not(.mat-expanded) & {
+    height: 0;
+    overflow: hidden;
+  }
 }
 
 .mat-expansion-panel-body {