refactor(module:tabs): use native animation (#9610)

Laffery · web-flow · commit fcd0d55c6024 · 2025-12-26T10:17:04.000+08:00
diff --git a/components/core/animation/no-animation.spec.ts b/components/core/animation/no-animation.spec.ts
@@ -8,6 +8,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
 import {
+  isAnimationEnabled,
   NZ_NO_ANIMATION_CLASS,
   NzNoAnimationDirective,
   provideNzNoAnimation,
@@ -21,6 +22,7 @@ import {
 class TestComponent {
   noAnimation = signal(false);
   animationClass = withAnimationCheck(() => 'animation-class');
+  animationEnabled = isAnimationEnabled(() => !this.noAnimation());
 }
 
 describe('NzNoAnimationDirective', () => {
@@ -93,9 +95,47 @@ describe('provideNzNoAnimation', () => {
   });
 });
 
+describe('isAnimationEnabled', () => {
+  it('should return passed getter when animations are enabled', () => {
+    const fixture = TestBed.createComponent(TestComponent);
+    expect(fixture.componentInstance.animationEnabled()).toBe(true);
+
+    fixture.componentInstance.noAnimation.set(true);
+    expect(fixture.componentInstance.animationEnabled()).toBe(false);
+  });
+
+  it('should return false with provideNoopAnimations', async () => {
+    TestBed.configureTestingModule({
+      providers: [provideNoopAnimations()]
+    });
+    const fixture = TestBed.createComponent(TestComponent);
+    expect(fixture.componentInstance.animationEnabled()).toBe(false);
+  });
+
+  it('should return false with provideNzNoAnimation', async () => {
+    TestBed.configureTestingModule({
+      providers: [provideNzNoAnimation()]
+    });
+    const fixture = TestBed.createComponent(TestComponent);
+    expect(fixture.componentInstance.animationEnabled()).toBe(false);
+  });
+
+  describe('injection context validation', () => {
+    it('should throw error when called outside injection context in dev mode', () => {
+      const originalDevMode = (globalThis as { ngDevMode?: boolean }).ngDevMode;
+      (globalThis as { ngDevMode?: boolean }).ngDevMode = true;
+
+      expect(() => {
+        isAnimationEnabled(() => true);
+      }).toThrow();
+
+      (globalThis as { ngDevMode?: boolean }).ngDevMode = originalDevMode;
+    });
+  });
+});
+
 describe('withAnimationCheck', () => {
   it('should return dynamic class when animations are enabled', () => {
-    TestBed.configureTestingModule({});
     const fixture = TestBed.createComponent(TestComponent);
     fixture.detectChanges();
 
diff --git a/components/core/animation/no-animation.ts b/components/core/animation/no-animation.ts
@@ -52,6 +52,23 @@ export function provideNzNoAnimation(): Provider[] {
   ];
 }
 
+function _internalAnimationEnabled(): boolean {
+  return inject(ANIMATION_MODULE_TYPE, { optional: true }) !== 'NoopAnimations';
+}
+
+/**
+ * If the current animation mode is `NoopAnimations`, returns the false as a signal.
+ * Otherwise, returns the result of the provided getter as a computed signal.
+ * @param getter A function that returns the outer logic for whether animations are enabled.
+ */
+export function isAnimationEnabled(getter: () => boolean): Signal<boolean> {
+  if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+    assertInInjectionContext(isAnimationEnabled);
+  }
+
+  return _internalAnimationEnabled() ? computed(getter) : signal(false);
+}
+
 /**
  * If the current animation mode is `NoopAnimations`, returns the no-animation class as a signal.
  * Otherwise, returns the result of the provided class name getter as a computed signal.
@@ -62,6 +79,5 @@ export function withAnimationCheck(classNameGetter: () => string): Signal<string
     assertInInjectionContext(withAnimationCheck);
   }
 
-  const animationType = inject(ANIMATION_MODULE_TYPE, { optional: true });
-  return animationType === 'NoopAnimations' ? signal(NZ_NO_ANIMATION_CLASS) : computed(classNameGetter);
+  return _internalAnimationEnabled() ? computed(classNameGetter) : signal(NZ_NO_ANIMATION_CLASS);
 }
diff --git a/components/core/animation/public-api.ts b/components/core/animation/public-api.ts
@@ -8,7 +8,6 @@ export * from './collapse';
 export * from './move';
 export * from './notification';
 export * from './slide';
-export * from './tabs';
 export * from './thumb';
 export * from './zoom';
 export * from './no-animation';
diff --git a/components/core/animation/tabs.ts b/components/core/animation/tabs.ts
diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
@@ -23,7 +23,6 @@
 
     .@{tab-prefix-cls}-nav-wrap {
       position: relative;
-      display: inline-block;
       display: flex;
       flex: auto;
       align-self: stretch;
diff --git a/components/tabs/tab-body.component.ts b/components/tabs/tab-body.component.ts
@@ -4,31 +4,104 @@
  */
 
 import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  signal,
+  TemplateRef,
+  untracked,
+  ViewEncapsulation
+} from '@angular/core';
 
-import { tabSwitchMotion } from 'ng-zorro-antd/core/animation';
+import { isAnimationEnabled } from 'ng-zorro-antd/core/animation';
+import { requestAnimationFrame } from 'ng-zorro-antd/core/polyfill';
+import { generateClassName } from 'ng-zorro-antd/core/util';
+
+type AnimationState = 'enter-start' | 'enter-active' | 'leave-start' | 'leave-active' | 'void' | 'hidden';
+
+const CLASS_NAME = 'ant-tabs-tabpane';
+const ANIMATION_PREFIX = 'ant-tabs-switch';
+const ANIMATION_CLASS_MAP: Record<AnimationState, string[]> = {
+  'enter-start': [generateClassName(ANIMATION_PREFIX, 'enter'), generateClassName(ANIMATION_PREFIX, 'enter-start')],
+  'enter-active': [generateClassName(ANIMATION_PREFIX, 'enter'), generateClassName(ANIMATION_PREFIX, 'enter-active')],
+  'leave-start': [generateClassName(ANIMATION_PREFIX, 'leave'), generateClassName(ANIMATION_PREFIX, 'leave-start')],
+  'leave-active': [generateClassName(ANIMATION_PREFIX, 'leave'), generateClassName(ANIMATION_PREFIX, 'leave-active')],
+  // If animation is enabled, we should hide the tabpane after the leave animation is done
+  hidden: [generateClassName(CLASS_NAME, 'hidden')],
+  void: []
+};
 
 @Component({
   selector: '[nz-tab-body]',
   exportAs: 'nzTabBody',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-template [ngTemplateOutlet]="content"></ng-template>`,
+  imports: [NgTemplateOutlet],
+  template: `<ng-template [ngTemplateOutlet]="content()"></ng-template>`,
   host: {
-    class: 'ant-tabs-tabpane',
-    '[class.ant-tabs-tabpane-active]': 'active',
-    '[class.ant-tabs-tabpane-hidden]': 'animated ? null : !active',
-    '[attr.tabindex]': 'active ? 0 : -1',
-    '[attr.aria-hidden]': '!active',
-    '[style.overflow-y]': 'animated ? active ? null : "none" : null',
-    '[@tabSwitchMotion]': `active ? 'enter' : 'leave'`,
-    '[@.disabled]': `!animated`
+    '[class]': 'class()',
+    '[class.ant-tabs-tabpane-active]': 'active()',
+    '[attr.tabindex]': 'active() ? 0 : -1',
+    '[attr.aria-hidden]': '!active()',
+    '(transitionend)': '_onTransitionEnd($event)'
   },
-  imports: [NgTemplateOutlet],
-  animations: [tabSwitchMotion]
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NzTabBodyComponent {
-  @Input() content: TemplateRef<void> | null = null;
-  @Input() active = false;
-  @Input() animated = true;
+  private readonly elementRef = inject(ElementRef);
+
+  readonly content = input<TemplateRef<void> | null>(null);
+  readonly active = input(false);
+  readonly animated = input(true);
+
+  protected readonly _animationState = signal<AnimationState>('void');
+  protected readonly _animationEnabled = isAnimationEnabled(() => this.animated());
+
+  protected readonly class = computed(() => {
+    const cls: string[] = [CLASS_NAME];
+    if (this._animationEnabled()) {
+      cls.push(...ANIMATION_CLASS_MAP[this._animationState()]);
+    } else if (!this.active()) {
+      cls.push(generateClassName(CLASS_NAME, 'hidden'));
+    }
+    return cls;
+  });
+
+  constructor() {
+    effect(() => {
+      if (!this._animationEnabled()) {
+        return;
+      }
+
+      if (!this.active()) {
+        untracked(() => this._animationState.set('leave-start'));
+        requestAnimationFrame(() => {
+          this._animationState.set('leave-active');
+        });
+      } else {
+        untracked(() => this._animationState.set('enter-start'));
+        requestAnimationFrame(() => {
+          this._animationState.set('enter-active');
+        });
+      }
+    });
+  }
+
+  protected _onTransitionEnd(event: TransitionEvent): void {
+    // avoid event bubbling from child elements
+    if (event.target !== this.elementRef.nativeElement) {
+      return;
+    }
+
+    const currentState = this._animationState();
+    if (currentState === 'enter-active') {
+      this._animationState.set('void');
+    } else if (currentState === 'leave-active') {
+      this._animationState.set('hidden');
+    }
+  }
 }
diff --git a/components/tabs/tab-nav-bar.component.ts b/components/tabs/tab-nav-bar.component.ts
@@ -55,8 +55,13 @@ const CSS_TRANSFORM_TIME = 150;
 @Component({
   selector: 'nz-tabs-nav',
   exportAs: 'nzTabsNav',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
+  imports: [
+    NzTabScrollListDirective,
+    NzTabAddButtonComponent,
+    NzTabsInkBarDirective,
+    NzTabNavOperationComponent,
+    NgTemplateOutlet
+  ],
   template: `
     @if (startExtraContent()) {
       <div class="ant-tabs-extra-content">
@@ -113,13 +118,8 @@ const CSS_TRANSFORM_TIME = 150;
     class: 'ant-tabs-nav',
     '(keydown)': 'handleKeydown($event)'
   },
-  imports: [
-    NzTabScrollListDirective,
-    NzTabAddButtonComponent,
-    NzTabsInkBarDirective,
-    NzTabNavOperationComponent,
-    NgTemplateOutlet
-  ]
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
 })
 export class NzTabNavBarComponent implements AfterViewInit, AfterContentChecked, OnChanges {
   private cdr = inject(ChangeDetectorRef);
diff --git a/components/tabs/tabs-ink-bar.directive.ts b/components/tabs/tabs-ink-bar.directive.ts
@@ -3,8 +3,10 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ANIMATION_MODULE_TYPE, Directive, ElementRef, Input, NgZone, inject } from '@angular/core';
+import { coerceCssPixelValue } from '@angular/cdk/coercion';
+import { Directive, ElementRef, NgZone, inject, input } from '@angular/core';
 
+import { isAnimationEnabled } from 'ng-zorro-antd/core/animation';
 import { requestAnimationFrame } from 'ng-zorro-antd/core/polyfill';
 
 import { NzTabPositionMode } from './interfaces';
@@ -13,20 +15,16 @@ import { NzTabPositionMode } from './interfaces';
   selector: 'nz-tabs-ink-bar, [nz-tabs-ink-bar]',
   host: {
     class: 'ant-tabs-ink-bar',
-    '[class.ant-tabs-ink-bar-animated]': '_animated'
+    '[class.ant-tabs-ink-bar-animated]': 'animationEnabled()'
   }
 })
 export class NzTabsInkBarDirective {
-  private ngZone = inject(NgZone);
-  private el: HTMLElement = inject(ElementRef<HTMLElement>).nativeElement;
+  private readonly ngZone = inject(NgZone);
+  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
 
-  @Input() position: NzTabPositionMode = 'horizontal';
-  @Input() animated = true;
-
-  animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
-  get _animated(): boolean {
-    return this.animationMode !== 'NoopAnimations' && this.animated;
-  }
+  readonly position = input<NzTabPositionMode>('horizontal');
+  readonly animated = input(true);
+  protected readonly animationEnabled = isAnimationEnabled(() => this.animated());
 
   alignToElement(element: HTMLElement): void {
     this.ngZone.runOutsideAngular(() => {
@@ -35,32 +33,16 @@ export class NzTabsInkBarDirective {
   }
 
   setStyles(element: HTMLElement): void {
-    if (this.position === 'horizontal') {
+    if (this.position() === 'horizontal') {
       this.el.style.top = '';
       this.el.style.height = '';
-      this.el.style.left = this.getLeftPosition(element);
-      this.el.style.width = this.getElementWidth(element);
+      this.el.style.left = coerceCssPixelValue(element?.offsetLeft || 0);
+      this.el.style.width = coerceCssPixelValue(element?.offsetWidth || 0);
     } else {
       this.el.style.left = '';
       this.el.style.width = '';
-      this.el.style.top = this.getTopPosition(element);
-      this.el.style.height = this.getElementHeight(element);
+      this.el.style.top = coerceCssPixelValue(element?.offsetTop || 0);
+      this.el.style.height = coerceCssPixelValue(element?.offsetHeight || 0);
     }
   }
-
-  getLeftPosition(element: HTMLElement): string {
-    return element ? `${element.offsetLeft || 0}px` : '0';
-  }
-
-  getElementWidth(element: HTMLElement): string {
-    return element ? `${element.offsetWidth || 0}px` : '0';
-  }
-
-  getTopPosition(element: HTMLElement): string {
-    return element ? `${element.offsetTop || 0}px` : '0';
-  }
-
-  getElementHeight(element: HTMLElement): string {
-    return element ? `${element.offsetHeight || 0}px` : '0';
-  }
 }
diff --git a/components/tabs/tabs.component.spec.ts b/components/tabs/tabs.component.spec.ts
