Skip to content

Commit 65b5640

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 328c5d4 commit 65b5640

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
@@ -792,7 +792,7 @@ describe('MDC-based MatTabGroup', () => {
792792
);
793793

794794
expect(contentElements.map(element => element.style.visibility)).toEqual([
795-
'',
795+
'visible',
796796
'hidden',
797797
'hidden',
798798
'hidden',
@@ -805,7 +805,7 @@ describe('MDC-based MatTabGroup', () => {
805805
expect(contentElements.map(element => element.style.visibility)).toEqual([
806806
'hidden',
807807
'hidden',
808-
'',
808+
'visible',
809809
'hidden',
810810
]);
811811

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

816816
expect(contentElements.map(element => element.style.visibility)).toEqual([
817817
'hidden',
818-
'',
818+
'visible',
819819
'hidden',
820820
'hidden',
821821
]);

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)