Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
crisbeto authored and wagnermaciel committed Jun 10, 2021
1 parent 0469635 commit 2af24d8
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion src/material-experimental/mdc-tabs/_tabs-common.scss
Expand Up @@ -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;
}
}
Expand Down

0 comments on commit 2af24d8

Please sign in to comment.