From 2af24d86e8aaf582a8ce8878d9ab9054807d2676 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 10 Jun 2021 14:34:47 +0200 Subject: [PATCH] fix(material-experimental/mdc-tabs): ink bar animation not always disabled (#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 61ce45da1b58bd10cf2c412ce7d961707ca7ff55) --- src/material-experimental/mdc-tabs/_tabs-common.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/material-experimental/mdc-tabs/_tabs-common.scss b/src/material-experimental/mdc-tabs/_tabs-common.scss index cf2b15e0abc3..cc228e8e3fc5 100644 --- a/src/material-experimental/mdc-tabs/_tabs-common.scss +++ b/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; } }