From 58c3b4d2fbf4e245f7494f28f71b8d1105af963f Mon Sep 17 00:00:00 2001
From: Abhinay Omkar <abhiomkar@gmail.com>
Date: Thu, 31 Jan 2019 16:38:14 -0500
Subject: [PATCH] fix(text-field): Fix textfield placeholder & outline stroke
 animation (#4310)

---
 packages/mdc-notched-outline/mdc-notched-outline.scss | 1 +
 packages/mdc-textfield/_functions.scss                | 4 ++--
 packages/mdc-textfield/mdc-text-field.scss            | 4 +++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/mdc-notched-outline/mdc-notched-outline.scss b/packages/mdc-notched-outline/mdc-notched-outline.scss
index b228b55e0ae..4a361fb4083 100644
--- a/packages/mdc-notched-outline/mdc-notched-outline.scss
+++ b/packages/mdc-notched-outline/mdc-notched-outline.scss
@@ -51,6 +51,7 @@
     &__trailing {
       box-sizing: border-box;
       height: 100%;
+      transition: border $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
       border-top: 1px solid;
       border-bottom: 1px solid;
       pointer-events: none;
diff --git a/packages/mdc-textfield/_functions.scss b/packages/mdc-textfield/_functions.scss
index 2ea81a62592..cd0be878cff 100644
--- a/packages/mdc-textfield/_functions.scss
+++ b/packages/mdc-textfield/_functions.scss
@@ -22,6 +22,6 @@
 
 @import "@material/animation/variables";
 
-@function mdc-text-field-transition($property) {
-  @return #{$property} 180ms $mdc-animation-standard-curve-timing-function;
+@function mdc-text-field-transition($property, $duration: 150ms) {
+  @return #{$property} #{$duration} $mdc-animation-standard-curve-timing-function;
 }
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index b69fa044353..82ba7e1b5db 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -90,7 +90,7 @@
   appearance: none;
 
   &::placeholder {
-    transition: mdc-text-field-transition(opacity);
+    transition: mdc-text-field-transition(opacity, $duration: 67ms);
     opacity: 0;
     color: $mdc-text-field-placeholder-ink-color;
   }
@@ -104,6 +104,8 @@
   // Always show placeholder for text field without label and show only on focused state when label is present.
   .mdc-text-field--no-label &::placeholder,
   .mdc-text-field--focused &::placeholder {
+    transition-delay: 40ms;
+    transition-duration: 110ms;
     opacity: 1;
   }