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

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.

Author: crisbeto

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>;