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.

Author: crisbeto

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;

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. */

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');