From 82847369efea4e00ed050811767f0a60af2423dc Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 13 Nov 2018 20:15:40 +0100
Subject: [PATCH] fix(expansion-panel): appearing as open if placed inside
 animating element

This is an alternate approach to #13888 which had to be reverted due to some presubmit issues. These changes address the problem by providing some default styles that will be applied if the expansion panel is inside an animating element.
---
 src/material/expansion/expansion-panel-header.scss | 13 +++++++++++++
 src/material/expansion/expansion-panel.scss        | 12 ++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/src/material/expansion/expansion-panel-header.scss b/src/material/expansion/expansion-panel-header.scss
index fca59ae3e331..e444012afd69 100644
--- a/src/material/expansion/expansion-panel-header.scss
+++ b/src/material/expansion/expansion-panel-header.scss
@@ -30,6 +30,19 @@
       }
     }
   }
+
+  // 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/material/expansion/expansion-panel.scss b/src/material/expansion/expansion-panel.scss
index 2ea2a908ea27..16a7d0b9e23b 100644
--- a/src/material/expansion/expansion-panel.scss
+++ b/src/material/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 {