fix(slider): Use pointer-events: none instead of visibility: hidden to hide the value indicator container. Adding visibility: hidden removes the exit animation since the value indicator is immediately hidden.

joyzhong · copybara-github · commit a94bd8deb879 · 2020-12-30T13:57:51.000-08:00
PiperOrigin-RevId: 349598927
diff --git a/packages/mdc-slider/_slider.scss b/packages/mdc-slider/_slider.scss
@@ -317,9 +317,9 @@ $_track-inactive-height: 4px;
       bottom: $_thumb-ripple-size / 2 + $_thumb-size / 2 +
         $_value-indicator-caret-width + 4px;
       left: 50%;
+      pointer-events: none;
       position: absolute;
       transform: translateX(-50%);
-      visibility: hidden;
     }
   }
 
@@ -359,7 +359,7 @@ $_track-inactive-height: 4px;
   .mdc-slider__thumb--with-indicator {
     .mdc-slider__value-indicator-container {
       @include feature-targeting.targets($feat-structure) {
-        visibility: visible;
+        pointer-events: auto;
       }
     }
 

Original file line number	Diff line number	Diff line change
`@@ -317,9 +317,9 @@ $_track-inactive-height: 4px;`
`317`	`317`	`bottom: $_thumb-ripple-size / 2 + $_thumb-size / 2 +`
`318`	`318`	`$_value-indicator-caret-width + 4px;`
`319`	`319`	`left: 50%;`
	`320`	`+ pointer-events: none;`
`320`	`321`	`position: absolute;`
`321`	`322`	`transform: translateX(-50%);`
`322`		`- visibility: hidden;`
`323`	`323`	`}`
`324`	`324`	`}`
`325`	`325`
`@@ -359,7 +359,7 @@ $_track-inactive-height: 4px;`
`359`	`359`	`.mdc-slider__thumb--with-indicator {`
`360`	`360`	`.mdc-slider__value-indicator-container {`
`361`	`361`	`@include feature-targeting.targets($feat-structure) {`
`362`		`- visibility: visible;`
	`362`	`+ pointer-events: auto;`
`363`	`363`	`}`
`364`	`364`	`}`
`365`	`365`