fix(text-field): Fix textfield placeholder & outline stroke animation (…

…#4310)
material-components · Jan 31, 2019 · 58c3b4d · 58c3b4d
1 parent 9f8ee9e
commit 58c3b4d
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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;
   }