From a5909db1df35b65c28b43a44f4336167c2b8cc65 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 26 Feb 2018 16:01:30 +0100
Subject: [PATCH] fix(select): animation jumping on IE11 (#10050)

Fixes the select animation looking off in IE11 by starting from the end, before resetting to the beginning and animating again. Seems to be due to the fact that we haven't defined the initial state, but we were setting it as a keyframe in the animation.
---
 src/lib/select/select-animations.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/select/select-animations.ts b/src/lib/select/select-animations.ts
index 756f12f4aba..f08e995c45f 100644
--- a/src/lib/select/select-animations.ts
+++ b/src/lib/select/select-animations.ts
@@ -38,6 +38,11 @@ export const matSelectAnimations: {
    * When the panel is removed from the DOM, it simply fades out linearly.
    */
   transformPanel: trigger('transformPanel', [
+    state('void', style({
+      transform: 'scaleY(0)',
+      minWidth: '100%',
+      opacity: 0
+    })),
     state('showing', style({
       opacity: 1,
       minWidth: 'calc(100% + 32px)', // 32px = 2 * 16px padding
@@ -50,11 +55,6 @@ export const matSelectAnimations: {
     })),
     transition('void => *', group([
       query('@fadeInContent', animateChild()),
-      style({
-        opacity: 0,
-        minWidth: '100%',
-        transform: 'scaleY(0)'
-      }),
       animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
     ])),
     transition('* => void', [