From 65b56400bd69035d291867a81257fad2dcb3ed5a Mon Sep 17 00:00:00 2001
From: Matthieu Riegler <kyro38@gmail.com>
Date: Mon, 8 Jul 2024 18:30:23 +0200
Subject: [PATCH] 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 e95d88cdeb2a7905c1897917f2b335d0ef53cb31)
---
 src/material/tabs/tab-group.spec.ts  | 6 +++---
 src/material/tabs/tabs-animations.ts | 7 +++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts
index c93b7ca3cd89..bcd7ce602283 100644
--- a/src/material/tabs/tab-group.spec.ts
+++ b/src/material/tabs/tab-group.spec.ts
@@ -792,7 +792,7 @@ describe('MDC-based MatTabGroup', () => {
       );
 
       expect(contentElements.map(element => element.style.visibility)).toEqual([
-        '',
+        'visible',
         'hidden',
         'hidden',
         'hidden',
@@ -805,7 +805,7 @@ describe('MDC-based MatTabGroup', () => {
       expect(contentElements.map(element => element.style.visibility)).toEqual([
         'hidden',
         'hidden',
-        '',
+        'visible',
         'hidden',
       ]);
 
@@ -815,7 +815,7 @@ describe('MDC-based MatTabGroup', () => {
 
       expect(contentElements.map(element => element.style.visibility)).toEqual([
         'hidden',
-        '',
+        'visible',
         'hidden',
         'hidden',
       ]);
diff --git a/src/material/tabs/tabs-animations.ts b/src/material/tabs/tabs-animations.ts
index 5e7955d4a373..e0097556cba2 100644
--- a/src/material/tabs/tabs-animations.ts
+++ b/src/material/tabs/tabs-animations.ts
@@ -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';
 
 /**
@@ -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