Skip to content

Commit a0991eb

Browse files
JeanMecheandrewseguin
authored andcommitted
fix(material/tabs): remove visibility style when hydrating (#29220)
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)
1 parent f56c422 commit a0991eb

File tree

2 files changed

+8
-5
lines changed

2 files changed

+8
-5
lines changed

src/material/tabs/tab-group.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -772,7 +772,7 @@ describe('MDC-based MatTabGroup', () => {
772772
);
773773

774774
expect(contentElements.map(element => element.style.visibility)).toEqual([
775-
'',
775+
'visible',
776776
'hidden',
777777
'hidden',
778778
'hidden',
@@ -785,7 +785,7 @@ describe('MDC-based MatTabGroup', () => {
785785
expect(contentElements.map(element => element.style.visibility)).toEqual([
786786
'hidden',
787787
'hidden',
788-
'',
788+
'visible',
789789
'hidden',
790790
]);
791791

@@ -795,7 +795,7 @@ describe('MDC-based MatTabGroup', () => {
795795

796796
expect(contentElements.map(element => element.style.visibility)).toEqual([
797797
'hidden',
798-
'',
798+
'visible',
799799
'hidden',
800800
'hidden',
801801
]);

src/material/tabs/tabs-animations.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88
import {
9+
AnimationTriggerMetadata,
910
animate,
1011
state,
1112
style,
1213
transition,
1314
trigger,
14-
AnimationTriggerMetadata,
1515
} from '@angular/animations';
1616

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

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

0 commit comments

Comments
 (0)