refactor(module:alert): use native animation API (#9590)

* refactor(module:alert):  new way to create animation

* test(module:alert): cover animation leave logic

Author: Nicoss54

components/alert/alert.component.ts

@@ -5,24 +5,26 @@
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import {
+  ANIMATION_MODULE_TYPE,
+  AnimationCallbackEvent,
+  booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   EventEmitter,
+  inject,
   Input,
   OnChanges,
   OnInit,
   Output,
   SimpleChanges,
   TemplateRef,
-  ViewEncapsulation,
-  booleanAttribute,
-  inject,
-  DestroyRef
+  ViewEncapsulation
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-import { slideAlertMotion } from 'ng-zorro-antd/core/animation';
+import { NzNoAnimationDirective } from 'ng-zorro-antd/core/animation';
 import { NzConfigKey, onConfigChangeEventForComponent, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -33,12 +35,12 @@ export type NzAlertType = 'success' | 'info' | 'warning' | 'error';
 @Component({
   selector: 'nz-alert',
   exportAs: 'nzAlert',
-  animations: [slideAlertMotion],
-  imports: [NzIconModule, NzOutletModule],
+  imports: [NzIconModule, NzOutletModule, NzNoAnimationDirective],
   template: `
     @if (!closed) {
       <div
         class="ant-alert"
+        [nzNoAnimation]="nzNoAnimation"
         [class.ant-alert-rtl]="dir === 'rtl'"
         [class.ant-alert-success]="nzType === 'success'"
         [class.ant-alert-info]="nzType === 'info'"
@@ -48,9 +50,7 @@ export type NzAlertType = 'success' | 'info' | 'warning' | 'error';
         [class.ant-alert-banner]="nzBanner"
         [class.ant-alert-closable]="nzCloseable"
         [class.ant-alert-with-description]="!!nzDescription"
-        [@.disabled]="nzNoAnimation"
-        [@slideAlertMotion]
-        (@slideAlertMotion.done)="onFadeAnimationDone()"
+        (animate.leave)="onLeaveAnimationDone($event)"
       >
         @if (nzShowIcon) {
           <div class="ant-alert-icon">
@@ -104,6 +104,7 @@ export class NzAlertComponent implements OnChanges, OnInit {
   private cdr = inject(ChangeDetectorRef);
   private directionality = inject(Directionality);
   private readonly destroyRef = inject(DestroyRef);
+  private readonly animationType = inject(ANIMATION_MODULE_TYPE, { optional: true });
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
 
   @Input() nzAction: string | TemplateRef<void> | null = null;
@@ -140,12 +141,32 @@ export class NzAlertComponent implements OnChanges, OnInit {
 
   closeAlert(): void {
     this.closed = true;
+    // When animations are disabled, emit immediately since animate.leave won't trigger
+    if (this.nzNoAnimation || this.animationType === 'NoopAnimations') {
+      this.nzOnClose.emit(true);
+    }
   }
 
-  onFadeAnimationDone(): void {
-    if (this.closed) {
-      this.nzOnClose.emit(true);
+  onLeaveAnimationDone(event: AnimationCallbackEvent): void {
+    const element = event.target as HTMLElement;
+
+    // If animations are disabled, complete immediately (nzOnClose already emitted in closeAlert)
+    if (this.nzNoAnimation || this.animationType === 'NoopAnimations') {
+      event.animationComplete();
+      return;
     }
+
+    // Apply animation classes
+    element.classList.add('ant-alert-motion-leave', 'ant-alert-motion-leave-active');
+
+    // Listen for transition end to complete the animation
+    const onTransitionEnd = (): void => {
+      element.removeEventListener('transitionend', onTransitionEnd);
+      this.nzOnClose.emit(true);
+      event.animationComplete();
+    };
+
+    element.addEventListener('transitionend', onTransitionEnd);
   }
 
   ngOnChanges(changes: SimpleChanges): void {

components/alert/alert.spec.ts

@@ -12,6 +12,7 @@ import { Subject } from 'rxjs';
 
 import { NzConfigService } from 'ng-zorro-antd/core/config';
 import { updateNonSignalsInput } from 'ng-zorro-antd/core/testing';
+import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { provideNzIconsTesting } from 'ng-zorro-antd/icon/testing';
 
 import { NzAlertComponent, NzAlertType } from './alert.component';
@@ -299,3 +300,56 @@ describe('NzAlertComponent', () => {
     expect(cdr.markForCheck).toHaveBeenCalled();
   });
 });
+
+describe('NzAlertComponent Animation', () => {
+  let component: NzAlertComponent;
+  let fixture: ComponentFixture<NzAlertComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideNzIconsTesting()],
+      animationsEnabled: true
+    });
+
+    fixture = TestBed.createComponent(NzAlertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should add animation classes and emit onClose when animation ends', () => {
+    spyOn(component.nzOnClose, 'emit');
+    const element = fixture.nativeElement.querySelector('.ant-alert');
+    const mockEvent = {
+      target: element,
+      animationComplete: jasmine.createSpy('animationComplete')
+    } as NzSafeAny;
+
+    component.onLeaveAnimationDone(mockEvent);
+
+    expect(element.classList).toContain('ant-alert-motion-leave');
+    expect(element.classList).toContain('ant-alert-motion-leave-active');
+    expect(component.nzOnClose.emit).not.toHaveBeenCalled();
+    expect(mockEvent.animationComplete).not.toHaveBeenCalled();
+
+    const transitionEndEvent = new Event('transitionend');
+    element.dispatchEvent(transitionEndEvent);
+
+    expect(component.nzOnClose.emit).toHaveBeenCalledWith(true);
+    expect(mockEvent.animationComplete).toHaveBeenCalled();
+  });
+
+  it('should handle no animation', () => {
+    component.nzNoAnimation = true;
+    spyOn(component.nzOnClose, 'emit');
+    const element = fixture.nativeElement.querySelector('.ant-alert');
+    const mockEvent = {
+      target: element,
+      animationComplete: jasmine.createSpy('animationComplete')
+    } as NzSafeAny;
+
+    component.onLeaveAnimationDone(mockEvent);
+
+    expect(element.classList).not.toContain('ant-alert-motion-leave');
+    expect(mockEvent.animationComplete).toHaveBeenCalled();
+  });
+});