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 8a4be141addf..5cf16006d90a 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 33cf4babd66d..b36b8f7e9840 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 67c1b2363007..e43cf3f323b1 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');