Skip to content

Commit

Permalink
fix(material/tabs): remove visibility style when hydrating (#29220)
Browse files Browse the repository at this point in the history
Before this commit, when using pre-rendering, the styling animation would only remove the `transform` style when hydrating the component. This commit fixes this by including `visibility` as styles to remove when playing the animations.

(cherry picked from commit e95d88c)
  • Loading branch information
JeanMeche authored and andrewseguin committed Jul 8, 2024
1 parent 328c5d4 commit 65b5640
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 5 deletions.
6 changes: 3 additions & 3 deletions src/material/tabs/tab-group.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -792,7 +792,7 @@ describe('MDC-based MatTabGroup', () => {
);

expect(contentElements.map(element => element.style.visibility)).toEqual([
'',
'visible',
'hidden',
'hidden',
'hidden',
Expand All @@ -805,7 +805,7 @@ describe('MDC-based MatTabGroup', () => {
expect(contentElements.map(element => element.style.visibility)).toEqual([
'hidden',
'hidden',
'',
'visible',
'hidden',
]);

Expand All @@ -815,7 +815,7 @@ describe('MDC-based MatTabGroup', () => {

expect(contentElements.map(element => element.style.visibility)).toEqual([
'hidden',
'',
'visible',
'hidden',
'hidden',
]);
Expand Down
7 changes: 5 additions & 2 deletions src/material/tabs/tabs-animations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
* found in the LICENSE file at https://angular.io/license
*/
import {
AnimationTriggerMetadata,
animate,
state,
style,
transition,
trigger,
AnimationTriggerMetadata,
} from '@angular/animations';

/**
Expand All @@ -24,7 +24,10 @@ export const matTabsAnimations: {
/** Animation translates a tab along the X axis. */
translateTab: trigger('translateTab', [
// Transitions to `none` instead of 0, because some browsers might blur the content.
state('center, void, left-origin-center, right-origin-center', style({transform: 'none'})),
state(
'center, void, left-origin-center, right-origin-center',
style({transform: 'none', visibility: 'visible'}),
),

// If the tab is either on the left or right, we additionally add a `min-height` of 1px
// in order to ensure that the element has a height before its state changes. This is
Expand Down

0 comments on commit 65b5640

Please sign in to comment.