fix: add transition to placeholder text

Author: crisbeto

src/lib/form-field/form-field.html

@@ -8,10 +8,19 @@
     <div class="mat-input-infix mat-form-field-infix">
       <ng-content></ng-content>
 
-      <span class="mat-form-field-label-wrapper">
+      <!--
+        TODO: remove `mat-input-placeholder-wrapper` and `mat-form-field-placeholder-wrapper`
+        next time we do breaking changes.
+      -->
+      <span class="mat-form-field-label-wrapper mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper">
         <!-- We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't
              read if it comes before the control in the DOM. -->
-        <label class="mat-form-field-label"
+
+        <!--
+          TODO: remove `mat-input-placeholder` and `mat-form-field-placeholder`
+          next time we do breaking changes.
+        -->
+        <label class="mat-form-field-label mat-input-placeholder mat-form-field-placeholder"
                [attr.for]="_control.id"
                [attr.aria-owns]="_control.id"
                [class.mat-empty]="_control.empty && !_shouldAlwaysFloat"

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;
   }
 }