fix(module:drawer): disable transition animation when placement change (

#4609) close #4224
NG-ZORRO · Jan 8, 2020 · e539096 · e539096
1 parent a533980
commit e539096
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 3 deletions.
diff --git a/components/drawer/nz-drawer.component.html b/components/drawer/nz-drawer.component.html
@@ -8,6 +8,7 @@
     [class.ant-drawer-right]="nzPlacement === 'right'"
     [class.ant-drawer-left]="nzPlacement === 'left'"
     [style.transform]="offsetTransform"
+    [style.transition]="placementChanging ? 'none' : null"
     [style.zIndex]="nzZIndex"
   >
     <div class="ant-drawer-mask" (click)="maskClick()" *ngIf="nzMask" [ngStyle]="nzMaskStyle"></div>
@@ -16,6 +17,7 @@
       [style.width]="width"
       [style.height]="height"
       [style.transform]="transform"
+      [style.transition]="placementChanging ? 'none' : null"
     >
       <div class="ant-drawer-content">
         <div class="ant-drawer-wrapper-body" [style.height]="isLeftOrRight ? '100%' : null">

diff --git a/components/drawer/nz-drawer.component.ts b/components/drawer/nz-drawer.component.ts
@@ -89,6 +89,8 @@ export class NzDrawerComponent<T = any, R = any, D = any> extends NzDrawerRef<R>
 
   destroy$ = new Subject<void>();
   previouslyFocusedElement: HTMLElement;
+  placementChanging = false;
+  placementChangeTimeoutId = -1;
   nzContentParams: D; // only service
   overlayRef: OverlayRef | null;
   portal: TemplatePortal;
@@ -190,26 +192,44 @@ export class NzDrawerComponent<T = any, R = any, D = any> extends NzDrawerRef<R>
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.hasOwnProperty('nzVisible')) {
+    const { nzPlacement, nzVisible } = changes;
+    if (nzVisible) {
       const value = changes.nzVisible.currentValue;
       if (value) {
         this.open();
       } else {
         this.close();
       }
     }
+    if (nzPlacement && !nzPlacement.isFirstChange()) {
+      this.triggerPlacementChangeCycleOnce();
+    }
   }
 
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
+    clearTimeout(this.placementChangeTimeoutId);
     this.disposeOverlay();
   }
 
   private getAnimationDuration(): number {
     return this.nzNoAnimation ? 0 : DRAWER_ANIMATE_DURATION;
   }
 
+  // Disable the transition animation temporarily when the placement changing
+  private triggerPlacementChangeCycleOnce(): void {
+    if (!this.nzNoAnimation) {
+      this.placementChanging = true;
+      this.changeDetectorRef.markForCheck();
+      clearTimeout(this.placementChangeTimeoutId);
+      this.placementChangeTimeoutId = setTimeout(() => {
+        this.placementChanging = false;
+        this.changeDetectorRef.markForCheck();
+      }, this.getAnimationDuration());
+    }
+  }
+
   close(result?: R): void {
     this.isOpen = false;
     this.updateOverlayStyle();

diff --git a/components/drawer/nz-drawer.spec.ts b/components/drawer/nz-drawer.spec.ts
@@ -5,7 +5,7 @@ import { async, ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angu
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { dispatchKeyboardEvent } from 'ng-zorro-antd/core';
+import { dispatchKeyboardEvent, NzNoAnimationModule } from 'ng-zorro-antd/core';
 
 import { NzDrawerRef } from './nz-drawer-ref';
 import { NzDrawerComponent } from './nz-drawer.component';
@@ -21,7 +21,7 @@ describe('NzDrawerComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [NzDrawerModule, NoopAnimationsModule],
+      imports: [NzDrawerModule, NoopAnimationsModule, NzNoAnimationModule],
       declarations: [NzTestDrawerComponent]
     }).compileComponents();
   }));
@@ -292,6 +292,44 @@ describe('NzDrawerComponent', () => {
     fixture.detectChanges();
   });
 
+  it('should disable the transition when the placement changing', fakeAsync(() => {
+    component.open();
+    tick(300);
+    fixture.detectChanges();
+    expect((overlayContainerElement.querySelector('.ant-drawer') as HTMLElement).style.transition).toBe('');
+    component.placement = 'top';
+    fixture.detectChanges();
+    expect((overlayContainerElement.querySelector('.ant-drawer') as HTMLElement).style.transition).toBe('none 0s ease 0s');
+    expect((overlayContainerElement.querySelector('.ant-drawer-content-wrapper') as HTMLElement).style.transition).toBe('none 0s ease 0s');
+    component.placement = 'right';
+    fixture.detectChanges();
+    component.close();
+    fixture.detectChanges();
+    tick(300);
+    fixture.detectChanges();
+    expect((overlayContainerElement.querySelector('.ant-drawer') as HTMLElement).style.transition).toBe('');
+  }));
+
+  it('should ignore set transition when `noAnimation` is `true` ', fakeAsync(() => {
+    component.noAnimation = true;
+    fixture.detectChanges();
+    component.open();
+    tick(300);
+    fixture.detectChanges();
+    expect((overlayContainerElement.querySelector('.ant-drawer') as HTMLElement).style.transition).toBe('');
+    component.placement = 'top';
+    fixture.detectChanges();
+    expect((overlayContainerElement.querySelector('.ant-drawer') as HTMLElement).style.transition).toBe('');
+    expect((overlayContainerElement.querySelector('.ant-drawer-content-wrapper') as HTMLElement).style.transition).toBe('');
+    fixture.detectChanges();
+    component.close();
+    component.placement = 'right';
+    component.noAnimation = false;
+    fixture.detectChanges();
+    tick(300);
+    fixture.detectChanges();
+  }));
+
   it('should nzOffsetX work', () => {
     component.open();
     component.placement = 'left';
@@ -448,6 +486,7 @@ describe('NzDrawerService', () => {
       [nzWidth]="width"
       [nzHeight]="height"
       [nzPlacement]="placement"
+      [nzNoAnimation]="noAnimation"
       [nzTitle]="title"
       [nzOffsetX]="offsetX"
       [nzOffsetY]="offsetY"
@@ -469,6 +508,7 @@ class NzTestDrawerComponent {
   width: string | number = '300px';
   height: string | number = '300px';
   placement = 'left';
+  noAnimation = false;
   offsetX = 0;
   offsetY = 0;
   @ViewChild('customTitle', { static: false }) templateTitle: TemplateRef<void>;