fix(material-experimental/mdc-tabs): ink bar animation not always dis…

…abled (#22848)

Fixes an issue where, in some cases, the load order can re-enable the ink bar animation that was disabled via the `NoopAnimationsModule`. This is noticeable by landing on the MDC input demo page with disabled animations and navigating to the MDC tabs demo page.

The issue seems to be caused by the fact that the two demos are in separate modules which causes Angular to insert the tab styles again when the user switches between them. Since the styles that disable the animation had the same specificity as the animation definition, swapping the loading order could cause them to be overwritten.

(cherry picked from commit 61ce45d)

src/material-experimental/mdc-tabs/_tabs-common.scss

@@ -146,7 +146,9 @@ $mat-tab-animation-duration: 500ms !default;
     }
   }
 
-  ._mat-animation-noopable .mdc-tab-indicator__content {
+  // The `span` is in the selector in order to increase the specificity, ensuring
+  // that it's always higher than the selector that declares the transition.
+  ._mat-animation-noopable span.mdc-tab-indicator__content {
     transition: none;
   }
 }