fix: add transition to placeholder text

Author: crisbeto

src/lib/input/input.scss

@@ -37,6 +37,13 @@
     display: none;
   }
 
+  @include input-placeholder {
+    // Delay the transition until the label has animated about a third of the way through, in
+    // order to prevent the placeholder from overlapping for a split second.
+    transition: color $swift-ease-out-duration $swift-ease-out-duration / 3
+      $swift-ease-out-timing-function;
+  }
+
   .mat-form-field-hide-placeholder & {
     // Note that we can't use something like visibility: hidden or
     // display: none, because IE ends up preventing the user from
@@ -45,6 +52,10 @@
       // Needs to be !important, because the placeholder will end up inheriting the
       // input color in IE, if the consumer overrides it with a higher specificity.
       color: transparent !important;
+
+      // Remove the transition to prevent the placeholder
+      // from overlapping when the label comes back down.
+      transition: none;
     }
   }
 }

src/lib/select/select.scss

@@ -89,7 +89,16 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
 }
 
 .mat-select-placeholder {
+  // Delay the transition until the label has animated about a third of the way through, in
+  // order to prevent the placeholder from overlapping for a split second.
+  transition: color $swift-ease-out-duration $swift-ease-out-duration / 3
+      $swift-ease-out-timing-function;
+
   .mat-form-field-hide-placeholder & {
     color: transparent;
+
+    // Remove the transition to prevent the placeholder
+    // from overlapping when the label comes back down.
+    transition: none;
   }
 }