From f9bd5d4bb53b71e40b89d51f77ea42da17a2c967 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 15 Aug 2017 23:47:58 +0200
Subject: [PATCH] fix(expansion-panel): animation not working in Angular 4.3
 (#6442)

Fixes the animation not working correctly in Angular 4.3. It seems like having both the margin and height animation on the element causes the height one to break. This approach also has the advantage of making it easier to override the margin and being able to use the SASS variables if necessary.
---
 src/lib/expansion/expansion-panel.scss |  6 ++++++
 src/lib/expansion/expansion-panel.ts   | 18 ++++++------------
 src/lib/expansion/expansion.spec.ts    |  4 ++--
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/lib/expansion/expansion-panel.scss b/src/lib/expansion/expansion-panel.scss
index 8a4be141add..5cf16006d90 100644
--- a/src/lib/expansion/expansion-panel.scss
+++ b/src/lib/expansion/expansion-panel.scss
@@ -5,6 +5,8 @@
   @include mat-elevation-transition;
   box-sizing: content-box;
   display: block;
+  margin: 0;
+  transition: margin 225ms $mat-fast-out-slow-in-timing-function;
 
   &:not([class*='mat-elevation-z']) {
     @include mat-elevation(2);
@@ -19,6 +21,10 @@
   padding: 0 24px 16px;
 }
 
+.mat-expansion-panel-spacing {
+  margin: 16px 0;
+}
+
 .mat-action-row {
   border-top-style: solid;
   border-top-width: 1px;
diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts
index 33cf4babd66..b36b8f7e984 100644
--- a/src/lib/expansion/expansion-panel.ts
+++ b/src/lib/expansion/expansion-panel.ts
@@ -27,7 +27,7 @@ import {
   transition,
   animate,
 } from '@angular/animations';
-import {MdAccordion, MdAccordionDisplayMode} from './accordion';
+import {MdAccordion} from './accordion';
 import {AccordionItem} from './accordion-item';
 import {UniqueSelectionDispatcher} from '../core';
 import {Subject} from 'rxjs/Subject';
@@ -57,7 +57,7 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
   host: {
     'class': 'mat-expansion-panel',
     '[class.mat-expanded]': 'expanded',
-    '[@displayMode]': '_getDisplayMode()',
+    '[class.mat-expansion-panel-spacing]': '_hasSpacing()',
   },
   providers: [
     {provide: AccordionItem, useExisting: forwardRef(() => MdExpansionPanel)}
@@ -68,12 +68,6 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
       state('expanded', style({height: '*', visibility: 'visible'})),
       transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
     ]),
-    trigger('displayMode', [
-      state('flat, collapsed', style({margin: '0'})),
-      state('default', style({margin: '16px 0'})),
-      transition('flat <=> collapsed, default <=> collapsed, flat <=> default',
-                 animate(EXPANSION_PANEL_ANIMATION_TIMING)),
-    ]),
   ],
 })
 export class MdExpansionPanel extends AccordionItem implements OnChanges, OnDestroy {
@@ -98,13 +92,13 @@ export class MdExpansionPanel extends AccordionItem implements OnChanges, OnDest
     return this.hideToggle;
   }
 
-  /** Gets the panel's display mode. */
-  _getDisplayMode(): MdAccordionDisplayMode | MdExpansionPanelState | 'void' {
+  /** Determines whether the expansion panel should have spacing between it and its siblings. */
+  _hasSpacing(): boolean {
     if (this.accordion) {
-      return this.expanded ? this.accordion.displayMode : this._getExpandedState();
+      return (this.expanded ? this.accordion.displayMode : this._getExpandedState()) === 'default';
     }
 
-    return 'void';
+    return false;
   }
 
   /** Gets the expanded state string. */
diff --git a/src/lib/expansion/expansion.spec.ts b/src/lib/expansion/expansion.spec.ts
index 67c1b236300..e43cf3f323b 100644
--- a/src/lib/expansion/expansion.spec.ts
+++ b/src/lib/expansion/expansion.spec.ts
@@ -85,7 +85,7 @@ describe('MdExpansionPanel', () => {
     let panel = fixture.debugElement.query(By.css('md-expansion-panel'));
     let styles = getComputedStyle(panel.nativeElement);
 
-    expect(panel.componentInstance._getDisplayMode()).toBe('void');
+    expect(panel.componentInstance._hasSpacing()).toBe(false);
     expect(styles.marginTop).toBe('13px');
     expect(styles.marginBottom).toBe('13px');
     expect(styles.marginLeft).toBe('37px');
@@ -97,7 +97,7 @@ describe('MdExpansionPanel', () => {
 
     styles = getComputedStyle(panel.nativeElement);
 
-    expect(panel.componentInstance._getDisplayMode()).toBe('void');
+    expect(panel.componentInstance._hasSpacing()).toBe(false);
     expect(styles.marginTop).toBe('13px');
     expect(styles.marginBottom).toBe('13px');
     expect(styles.marginLeft).toBe('37px');