fix(module:badge): enable nzNoAnimation support

components/badge/badge-sup.component.ts

@@ -27,6 +27,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
   template: `
     <ng-container *ngIf="count <= nzOverflowCount; else overflowTemplate">
       <span
+        [nzNoAnimation]="noAnimation"
         *ngFor="let n of maxNumberArray; let i = index"
         class="ant-scroll-number-only"
         [style.transform]="'translateY(' + -countArray[i] * 100 + '%)'"
@@ -60,6 +61,7 @@ export class NzBadgeSupComponent implements OnInit, OnChanges {
   @Input() nzOverflowCount: number = 99;
   @Input() disableAnimation = false;
   @Input() nzCount?: number | TemplateRef<NzSafeAny>;
+  @Input() noAnimation = false;
   maxNumberArray: string[] = [];
   countArray: number[] = [];
   count: number = 0;

components/badge/badge.component.ts

@@ -9,6 +9,7 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  Host,
   Input,
   OnChanges,
   OnDestroy,
@@ -21,6 +22,7 @@ import {
 } from '@angular/core';
 import { zoomBadgeMotion } from 'ng-zorro-antd/core/animation';
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
+import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { Subject } from 'rxjs';
@@ -57,8 +59,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge';
         [nzStyle]="nzStyle"
         [nzDot]="nzDot"
         [nzOverflowCount]="nzOverflowCount"
-        [disableAnimation]="!!(nzStandalone || nzStatus || nzColor)"
+        [disableAnimation]="!!(nzStandalone || nzStatus || nzColor || noAnimation?.nzNoAnimation)"
         [nzCount]="nzCount"
+        [noAnimation]="!!noAnimation?.nzNoAnimation"
       ></nz-badge-sup>
     </ng-container>
   `,
@@ -95,7 +98,8 @@ export class NzBadgeComponent implements OnChanges, OnDestroy, OnInit {
     private renderer: Renderer2,
     private cdr: ChangeDetectorRef,
     private elementRef: ElementRef,
-    @Optional() private directionality: Directionality
+    @Optional() private directionality: Directionality,
+    @Host() @Optional() public noAnimation?: NzNoAnimationDirective
   ) {
     // TODO: move to host after View Engine deprecation
     this.elementRef.nativeElement.classList.add('ant-badge');

components/badge/badge.module.ts

@@ -7,6 +7,7 @@ import { BidiModule } from '@angular/cdk/bidi';
 import { ObserversModule } from '@angular/cdk/observers';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzBadgeSupComponent } from './badge-sup.component';
 import { NzBadgeComponent } from './badge.component';
@@ -15,6 +16,6 @@ import { NzRibbonComponent } from './ribbon.component';
 @NgModule({
   declarations: [NzBadgeComponent, NzBadgeSupComponent, NzRibbonComponent],
   exports: [NzBadgeComponent, NzRibbonComponent],
-  imports: [BidiModule, CommonModule, ObserversModule, NzOutletModule]
+  imports: [BidiModule, CommonModule, ObserversModule, NzOutletModule, NzNoAnimationModule]
 })
 export class NzBadgeModule {}

components/badge/badge.spec.ts

@@ -2,15 +2,16 @@ import { BidiModule, Dir } from '@angular/cdk/bidi';
 import { Component, DebugElement, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
 import { NgStyleInterface } from 'ng-zorro-antd/core/types';
 import { NzBadgeComponent } from './badge.component';
 import { NzBadgeModule } from './badge.module';
 
 describe('badge', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports: [BidiModule, NzBadgeModule, NoopAnimationsModule],
+      imports: [BidiModule, NzBadgeModule, NzNoAnimationModule, BrowserAnimationsModule],
       declarations: [NzTestBadgeBasicComponent, NzTestBadgeRtlComponent]
     });
     TestBed.compileComponents();
@@ -125,6 +126,15 @@ describe('badge', () => {
       expect(badgeElement.nativeElement.querySelector('nz-badge-sup').style.backgroundColor).toBe('rgb(82, 196, 26)');
     }));
 
+    it('should disable animation for inner elements when `noAnimation` is `true` ', fakeAsync(() => {
+      testComponent.noAnimation = true;
+      fixture.detectChanges();
+      tick(1000);
+      expect(badgeElement.nativeElement.classList).toContain('nz-animate-disabled');
+      expect(badgeElement.nativeElement.querySelector('nz-badge-sup .ant-scroll-number-only').classList).toContain('nz-animate-disabled');
+      fixture.detectChanges();
+    }));
+
     it('should status work', () => {
       testComponent.inner = false;
       const statusList = ['success', 'processing', 'default', 'error', 'warning'];
@@ -170,6 +180,7 @@ describe('badge', () => {
       [nzText]="text"
       [nzShowZero]="showZero"
       [nzOverflowCount]="overflow"
+      [nzNoAnimation]="noAnimation"
       [nzStyle]="style"
       [nzDot]="dot"
       [nzOffset]="offset"
@@ -191,6 +202,7 @@ export class NzTestBadgeBasicComponent {
   text!: string;
   title?: string | null;
   offset?: [number, number];
+  noAnimation = true;
 }
 
 @Component({

components/style/patch.less

@@ -84,6 +84,12 @@
 }
 
 .nz-animate-disabled {
+  // badge
+  &.ant-scroll-number-only {
+    animation: none;
+    transition: none;
+  }
+
   // drawer
   &.ant-drawer {
     &.ant-drawer-open .ant-drawer-mask {