fix(expansion-panel): appearing as open if placed inside animating el…

…ement

This is an alternate approach to angular#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/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 {

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 {