fix(material/tabs): switch away from animations module

Reworks the tabs so they don't depend on the animations module anymore. This is both simpler and avoids some of the pitfalls of the animations module.

src/dev-app/tabs/tabs-demo.ts

@@ -22,7 +22,7 @@ import {
   TabNavBarBasicExample,
 } from '@angular/components-examples/material/tabs';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MAT_TABS_CONFIG, MatTabsModule} from '@angular/material/tabs';
 
 @Component({
   selector: 'tabs-demo',
@@ -44,5 +44,13 @@ import {MatTabsModule} from '@angular/material/tabs';
     MatTabsModule,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: MAT_TABS_CONFIG,
+      useValue: {
+        animationDuration: '0',
+      },
+    },
+  ],
 })
 export class TabsDemo {}

src/material/tabs/tab-body.html

@@ -1,10 +1,9 @@
-<div class="mat-mdc-tab-body-content" #content
-     [@translateTab]="{
-        value: _position,
-        params: {animationDuration: animationDuration}
-     }"
-     (@translateTab.start)="_onTranslateTabStarted($event)"
-     (@translateTab.done)="_translateTabComplete.next($event)"
-     cdkScrollable>
+<div
+   class="mat-mdc-tab-body-content"
+   #content
+   cdkScrollable
+   [class.mat-tab-body-content-left]="_position === 'left'"
+   [class.mat-tab-body-content-right]="_position === 'right'"
+   [class.mat-tab-body-content-can-animate]="_position === 'center' || _previousPosition === 'center'">
   <ng-template matTabBodyHost></ng-template>
 </div>

src/material/tabs/tab-body.scss

@@ -27,19 +27,33 @@
 .mat-mdc-tab-body-content {
   height: 100%;
   overflow: auto;
+  transform: none;
+  visibility: hidden;
+
+  .mat-tab-body-animating > &,
+  .mat-mdc-tab-body-active > & {
+    visibility: visible;
+  }
 
   .mat-mdc-tab-group-dynamic-height & {
     overflow: hidden;
   }
+}
+
+.mat-tab-body-content-can-animate {
+  // Note: there's a 1ms delay so that transition events
+  // still fire even if the duration is set to zero.
+  transition: transform var(--mat-tab-animation-duration) 1ms cubic-bezier(0.35, 0, 0.25, 1);
 
-  // Usually the `visibility: hidden` added by the animation is enough to prevent focus from
-  // entering the collapsed content, but children with their own `visibility` can override it.
-  // This is a fallback that completely hides the content when the element becomes hidden.
-  // Note that we can't do this in the animation definition, because the style gets recomputed too
-  // late, breaking the animation because Angular didn't have time to figure out the target height.
-  // This can also be achieved with JS, but it has issues when starting an animation before
-  // the previous one has finished.
-  &[style*='visibility: hidden'] {
-    display: none;
+  .mat-mdc-tab-body-wrapper._mat-animation-noopable & {
+    transition: none;
   }
 }
+
+.mat-tab-body-content-left {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.mat-tab-body-content-right {
+  transform: translate3d(100%, 0, 0);
+}

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

@@ -36,74 +36,12 @@ describe('MatTabBody', () => {
     });
   }));
 
-  describe('when initialized as center', () => {
-    let fixture: ComponentFixture<SimpleTabBodyApp>;
-
-    it('should be center position if origin is unchanged', () => {
-      fixture = TestBed.createComponent(SimpleTabBodyApp);
-      fixture.componentInstance.position = 0;
-      fixture.detectChanges();
-
-      expect(fixture.componentInstance.tabBody._position).toBe('center');
-    });
-
-    it('should be center position if origin is explicitly set to null', () => {
-      fixture = TestBed.createComponent(SimpleTabBodyApp);
-      fixture.componentInstance.position = 0;
-
-      // It can happen that the `origin` is explicitly set to null through the Angular input
-      // binding. This test should ensure that the body does properly such origin value.
-      // The `MatTab` class sets the origin by default to null. See related issue: #12455
-      fixture.componentInstance.origin = null;
-      fixture.detectChanges();
-
-      expect(fixture.componentInstance.tabBody._position).toBe('center');
-    });
-
-    describe('in LTR direction', () => {
-      beforeEach(() => {
-        dir = 'ltr';
-        fixture = TestBed.createComponent(SimpleTabBodyApp);
-      });
-      it('should be left-origin-center position with negative or zero origin', () => {
-        fixture.componentInstance.position = 0;
-        fixture.componentInstance.origin = 0;
-        fixture.detectChanges();
-
-        expect(fixture.componentInstance.tabBody._position).toBe('left-origin-center');
-      });
-
-      it('should be right-origin-center position with positive nonzero origin', () => {
-        fixture.componentInstance.position = 0;
-        fixture.componentInstance.origin = 1;
-        fixture.detectChanges();
-
-        expect(fixture.componentInstance.tabBody._position).toBe('right-origin-center');
-      });
-    });
-
-    describe('in RTL direction', () => {
-      beforeEach(() => {
-        dir = 'rtl';
-        fixture = TestBed.createComponent(SimpleTabBodyApp);
-      });
-
-      it('should be right-origin-center position with negative or zero origin', () => {
-        fixture.componentInstance.position = 0;
-        fixture.componentInstance.origin = 0;
-        fixture.detectChanges();
-
-        expect(fixture.componentInstance.tabBody._position).toBe('right-origin-center');
-      });
-
-      it('should be left-origin-center position with positive nonzero origin', () => {
-        fixture.componentInstance.position = 0;
-        fixture.componentInstance.origin = 1;
-        fixture.detectChanges();
+  it('should be center position if origin is unchanged', () => {
+    const fixture = TestBed.createComponent(SimpleTabBodyApp);
+    fixture.componentInstance.position = 0;
+    fixture.detectChanges();
 
-        expect(fixture.componentInstance.tabBody._position).toBe('left-origin-center');
-      });
-    });
+    expect(fixture.componentInstance.tabBody._position).toBe('center');
   });
 
   describe('should properly set the position in LTR', () => {
@@ -213,14 +151,13 @@ describe('MatTabBody', () => {
 @Component({
   template: `
     <ng-template>Tab Body Content</ng-template>
-    <mat-tab-body [content]="content()" [position]="position" [origin]="origin"></mat-tab-body>
+    <mat-tab-body [content]="content()" [position]="position"></mat-tab-body>
   `,
   imports: [PortalModule, MatRippleModule, MatTabBody],
 })
 class SimpleTabBodyApp implements AfterViewInit {
   content = signal<TemplatePortal | undefined>(undefined);
   position: number;
-  origin: number | null;
 
   @ViewChild(MatTabBody) tabBody: MatTabBody;
   @ViewChild(TemplateRef) template: TemplateRef<any>;