From e411c2b5875c301f478b9279bb6f272cb90aa958 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 31 May 2021 20:20:57 +0200 Subject: [PATCH] fix(material-experimental/mdc-tabs): ink bar animation not always disabled 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. --- 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; } }