fix(material/tabs): remove visibility style when hydrating

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.

Author: JeanMeche

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',
       ]);

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