fix(ripple): Transition background-color to avoid flashes (material-c…

…omponents#3693) (cherry picked from commit cbc1f95)
Lundalogik · Oct 8, 2018 · 17a5828 · 17a5828
1 parent 974c2d5
commit 17a5828
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/packages/mdc-ripple/_mixins.scss b/packages/mdc-ripple/_mixins.scss
@@ -46,7 +46,10 @@
   }
 
   &::before {
-    transition: opacity $mdc-states-wash-duration linear;
+    // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state
+    transition:
+      opacity $mdc-states-wash-duration linear,
+      background-color $mdc-states-wash-duration linear;
     z-index: 1; // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements
   }