refactor(module:message,notification): use native animation (#9609)

Author: Laffery

components/core/animation/move.ts

@@ -5,8 +5,6 @@
 
 export * from './animation-consts';
 export * from './collapse';
-export * from './move';
-export * from './notification';
 export * from './slide';
 export * from './zoom';
 export * from './no-animation';

components/core/animation/notification.ts

@@ -3,17 +3,25 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { AnimationEvent } from '@angular/animations';
 import {
   ComponentType,
   createGlobalPositionStrategy,
   createNoopScrollStrategy,
   createOverlayRef
 } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { ChangeDetectorRef, DestroyRef, Directive, EventEmitter, inject, Injector, OnInit } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  DestroyRef,
+  Directive,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Injector,
+  OnInit,
+  Signal
+} from '@angular/core';
 import { Subject } from 'rxjs';
-import { filter, take } from 'rxjs/operators';
 
 import { MessageConfig, NzConfigService } from 'ng-zorro-antd/core/config';
 import { NzSingletonService } from 'ng-zorro-antd/core/services';
@@ -163,13 +171,27 @@ export abstract class NzMNComponent implements OnInit {
   abstract index?: number;
   abstract destroyed: EventEmitter<{ id: string; userAction: boolean }>;
 
-  protected cdr = inject(ChangeDetectorRef);
   protected destroyRef = inject(DestroyRef);
-  readonly animationStateChanged: Subject<AnimationEvent> = new Subject<AnimationEvent>();
+  protected elementRef = inject(ElementRef);
+
+  /**
+   * To get the element which triggers the animation.
+   */
+  protected abstract animationElement: Signal<ElementRef<HTMLElement>>;
+
+  /**
+   * When the animation is enabled, it is used to judge whether the leave animation is done or not.
+   * @note Keyframe of notification may have different keyframe names with individual placements, so use array here.
+   */
+  protected abstract _animationKeyframeMap: Record<'enter' | 'leave', string | string[]>;
+
+  /**
+   * The animation class map for enter and leave.
+   */
+  protected abstract _animationClassMap: Record<'enter' | 'leave', string>;
 
   protected options!: Required<NzMessageDataOptions>;
   protected autoClose?: boolean;
-  protected closeTimer?: ReturnType<typeof setTimeout>;
   protected userAction: boolean = false;
   protected eraseTimer?: ReturnType<typeof setTimeout>;
   protected eraseTimingStart?: number;
@@ -180,24 +202,16 @@ export abstract class NzMNComponent implements OnInit {
       if (this.autoClose) {
         this.clearEraseTimeout();
       }
-      this.animationStateChanged.complete();
     });
   }
 
   ngOnInit(): void {
     this.options = this.instance.options as Required<NzMessageDataOptions>;
 
     if (this.options.nzAnimate) {
+      // todo: remove this line in v22.0.0
       this.instance.state = 'enter';
-      this.animationStateChanged
-        .pipe(
-          filter(event => event.phaseName === 'done' && event.toState === 'leave'),
-          take(1)
-        )
-        .subscribe(() => {
-          clearTimeout(this.closeTimer);
-          this.destroyed.next({ id: this.instance.messageId, userAction: this.userAction });
-        });
+      this._startEnterAnimation();
     }
 
     this.autoClose = this.options.nzDuration > 0;
@@ -224,12 +238,9 @@ export abstract class NzMNComponent implements OnInit {
   protected destroy(userAction: boolean = false): void {
     this.userAction = userAction;
     if (this.options.nzAnimate) {
+      // todo: remove this line in v22.0.0
       this.instance.state = 'leave';
-      this.cdr.detectChanges();
-      this.closeTimer = setTimeout(() => {
-        this.closeTimer = undefined;
-        this.destroyed.next({ id: this.instance.messageId, userAction });
-      }, 200);
+      this._startLeaveAnimation(() => this.destroyed.next({ id: this.instance.messageId, userAction }));
     } else {
       this.destroyed.next({ id: this.instance.messageId, userAction });
     }
@@ -262,4 +273,40 @@ export abstract class NzMNComponent implements OnInit {
       this.eraseTimer = undefined;
     }
   }
+
+  private _startEnterAnimation(): void {
+    const element = this.animationElement().nativeElement;
+    element.classList.add(this._animationClassMap.enter);
+
+    const onAnimationEnd = (event: AnimationEvent): void => {
+      if (this.matchAnimationKeyframe(event, this._animationKeyframeMap.enter)) {
+        element.removeEventListener('animationend', onAnimationEnd);
+        // should remove animation enter class once animation is done
+        element.classList.remove(this._animationClassMap.enter);
+      }
+    };
+
+    element.addEventListener('animationend', onAnimationEnd);
+  }
+
+  private _startLeaveAnimation(callback: () => void): void {
+    const element = this.animationElement().nativeElement;
+    element.classList.remove(this._animationClassMap.enter);
+    element.classList.add(this._animationClassMap.leave);
+
+    const onAnimationEnd = (event: AnimationEvent): void => {
+      if (this.matchAnimationKeyframe(event, this._animationKeyframeMap.leave)) {
+        element.removeEventListener('animationend', onAnimationEnd);
+        callback();
+      }
+    };
+
+    element.addEventListener('animationend', onAnimationEnd);
+  }
+
+  private matchAnimationKeyframe(event: AnimationEvent, animationName: string | string[]): boolean {
+    return typeof animationName === 'string'
+      ? event.animationName === animationName
+      : animationName.includes(event.animationName);
+  }
 }

components/core/animation/public-api.ts

@@ -6,33 +6,31 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   OnInit,
   Output,
+  viewChild,
   ViewEncapsulation
 } from '@angular/core';
 
-import { moveUpMotion } from 'ng-zorro-antd/core/animation';
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
 import { NzMNComponent } from './base';
 import { NzMessageData } from './typings';
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
   selector: 'nz-message',
   exportAs: 'nzMessage',
-  animations: [moveUpMotion],
+  imports: [NzIconModule, NzOutletModule],
   template: `
     <div
+      #animationElement
       class="ant-message-notice"
       [class]="instance.options?.nzClass"
       [style]="instance.options?.nzStyle"
-      [@moveUpMotion]="instance.state"
-      (@moveUpMotion.done)="animationStateChanged.next($event)"
       (mouseenter)="onEnter()"
       (mouseleave)="onLeave()"
     >
@@ -64,10 +62,21 @@ import { NzMessageData } from './typings';
       </div>
     </div>
   `,
-  imports: [NzIconModule, NzOutletModule]
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
 })
 export class NzMessageComponent extends NzMNComponent implements OnInit {
   @Input() override instance!: Required<NzMessageData>;
   @Output() override readonly destroyed = new EventEmitter<{ id: string; userAction: boolean }>();
   index?: number;
+
+  readonly animationElement = viewChild.required('animationElement', { read: ElementRef });
+  protected readonly _animationKeyframeMap = {
+    enter: 'MessageMoveIn',
+    leave: 'MessageMoveOut'
+  };
+  protected readonly _animationClassMap = {
+    enter: 'ant-message-move-up-enter',
+    leave: 'ant-message-move-up-leave'
+  };
 }