fix(module:badge): fix init animations (#3925)

close #3686
NG-ZORRO · Aug 9, 2019 · 353c95b · 353c95b
1 parent 38062fb
commit 353c95b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/components/badge/nz-badge.component.html b/components/badge/nz-badge.component.html
@@ -6,8 +6,9 @@
 <span class="ant-badge-status-text" *ngIf="nzStatus || nzColor">{{ nzText }}</span>
 <ng-container *nzStringTemplateOutlet="nzCount">
   <sup class="ant-scroll-number"
-       *ngIf="showSup"
-       @zoomBadgeMotion
+       *ngIf="showSup && viewInit"
+       [@.disabled]="notWrapper"
+       [@zoomBadgeMotion]
        [ngStyle]="nzStyle"
        [class.ant-badge-count]="!nzDot"
        [class.ant-badge-dot]="nzDot"

diff --git a/components/badge/nz-badge.component.ts b/components/badge/nz-badge.component.ts
@@ -10,9 +10,11 @@ import { ContentObserver } from '@angular/cdk/observers';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   Input,
+  NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -24,7 +26,7 @@ import {
 } from '@angular/core';
 import { isEmpty, zoomBadgeMotion, InputBoolean } from 'ng-zorro-antd/core';
 import { Subject } from 'rxjs';
-import { startWith, takeUntil } from 'rxjs/operators';
+import { startWith, take, takeUntil } from 'rxjs/operators';
 
 export type NzBadgeStatusType = 'success' | 'processing' | 'default' | 'error' | 'warning';
 
@@ -42,6 +44,8 @@ export type NzBadgeStatusType = 'success' | 'processing' | 'default' | 'error' |
 })
 export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
   private destroy$ = new Subject();
+  notWrapper = true;
+  viewInit = false;
   maxNumberArray: string[] = [];
   countArray: number[] = [];
   countSingleArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
@@ -74,7 +78,8 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDes
   @Input() nzCount: number | TemplateRef<void>;
 
   checkContent(): void {
-    if (isEmpty(this.contentElement.nativeElement)) {
+    this.notWrapper = isEmpty(this.contentElement.nativeElement);
+    if (this.notWrapper) {
       this.renderer.addClass(this.elementRef.nativeElement, 'ant-badge-not-a-wrapper');
     } else {
       this.renderer.removeClass(this.elementRef.nativeElement, 'ant-badge-not-a-wrapper');
@@ -89,7 +94,13 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDes
     this.maxNumberArray = this.nzOverflowCount.toString().split('');
   }
 
-  constructor(private renderer: Renderer2, private elementRef: ElementRef, private contentObserver: ContentObserver) {
+  constructor(
+    private renderer: Renderer2,
+    private elementRef: ElementRef,
+    private contentObserver: ContentObserver,
+    private cdr: ChangeDetectorRef,
+    private ngZone: NgZone
+  ) {
     renderer.addClass(elementRef.nativeElement, 'ant-badge');
   }
 
@@ -98,6 +109,11 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDes
   }
 
   ngAfterViewInit(): void {
+    this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+      this.viewInit = true;
+      this.cdr.markForCheck();
+    });
+
     this.contentObserver
       .observe(this.contentElement)
       .pipe(