Add the panel background after the animations are done.

angular · Dec 12, 2016 · 5f59ebf · 5f59ebf
1 parent 5f9dd6e
commit 5f59ebf
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
@@ -34,7 +34,7 @@
     }
   }
 
-  .md-select-panel {
+  .md-select-content, .md-select-panel-done-animating {
     background: md-color($background, card);
   }
 

diff --git a/src/lib/select/select.html b/src/lib/select/select.html
@@ -5,11 +5,12 @@
   <span class="md-select-arrow"></span>
 </div>
 
-<template connected-overlay [origin]="origin"  [open]="panelOpen" hasBackdrop (backdropClick)="close()"
+<template connected-overlay [origin]="origin" [open]="panelOpen" hasBackdrop (backdropClick)="close()"
   backdropClass="md-overlay-transparent-backdrop" [positions]="_positions" [minWidth]="_triggerWidth"
   [offsetY]="_offsetY" [offsetX]="_offsetX" (attach)="_setScrollTop()">
   <div class="md-select-panel" [@transformPanel]="'showing'" (@transformPanel.done)="_onPanelDone()"
-    (keydown)="_keyManager.onKeydown($event)" [style.transformOrigin]="_transformOrigin">
+    (keydown)="_keyManager.onKeydown($event)" [style.transformOrigin]="_transformOrigin"
+      [ngClass]="_panelDoneAnimating ? 'md-select-panel-done-animating' : ''">
     <div class="md-select-content" [@fadeInContent]="'showing'">
       <ng-content></ng-content>
     </div>

diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
@@ -147,6 +147,9 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
   /** The value of the select panel's transform-origin property. */
   _transformOrigin: string = 'top';
 
+  /** Whether the panel's animation is done. */
+  _panelDoneAnimating: boolean = false;
+
   /**
    * The x-offset of the overlay panel in relation to the trigger's top start corner.
    * This must be adjusted to align the selected option text over the trigger text when
@@ -349,6 +352,8 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
     } else {
       this.onClose.emit();
     }
+
+    this._panelDoneAnimating = this.panelOpen;
   }
 
   /**