Skip to content

Commit 61ce45d

Browse files
authored
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.
1 parent 4d2a6f9 commit 61ce45d

File tree

1 file changed

+3
-1
lines changed

1 file changed

+3
-1
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,9 @@ $mat-tab-animation-duration: 500ms !default;
146146
}
147147
}
148148

149-
._mat-animation-noopable .mdc-tab-indicator__content {
149+
// The `span` is in the selector in order to increase the specificity, ensuring
150+
// that it's always higher than the selector that declares the transition.
151+
._mat-animation-noopable span.mdc-tab-indicator__content {
150152
transition: none;
151153
}
152154
}

0 commit comments

Comments
 (0)