fix(module:date-picker): animation start after overlay open (#4315)

NG-ZORRO · Nov 8, 2019 · 931fd48 · 931fd48
1 parent 4c78cca
commit 931fd48
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/components/date-picker/lib/calendar/calendar-input.component.ts b/components/date-picker/lib/calendar/calendar-input.component.ts
@@ -48,7 +48,7 @@ export class CalendarInputComponent implements OnInit {
 
   ngOnInit(): void {
     if (this.autoFocus) {
-      this.inputRef.nativeElement.focus();
+      setTimeout(() => this.inputRef.nativeElement.focus());
     }
   }
 

diff --git a/components/date-picker/picker.component.html b/components/date-picker/picker.component.html
@@ -82,7 +82,6 @@
   <div
     [nzNoAnimation]="noAnimation"
     [@slideMotion]="dropdownAnimation"
-    (@slideMotion.start)="animationStart()"
     (@slideMotion.done)="animationDone()"
     style="position: relative;"
     [style.left]="currentPositionX === 'start' ? '-2px' : '2px'"

diff --git a/components/date-picker/picker.component.ts b/components/date-picker/picker.component.ts
@@ -20,7 +20,9 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  OnChanges,
   Output,
+  SimpleChanges,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
@@ -36,7 +38,7 @@ import { DateHelperService } from 'ng-zorro-antd/i18n';
   animations: [slideMotion],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class NzPickerComponent implements AfterViewInit {
+export class NzPickerComponent implements AfterViewInit, OnChanges {
   @Input() noAnimation: boolean = false;
   @Input() isRange: boolean = false;
   @Input() open: boolean | undefined = undefined;
@@ -106,6 +108,12 @@ export class NzPickerComponent implements AfterViewInit {
     }
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.open) {
+      this.animationStart();
+    }
+  }
+
   focus(): void {
     if (this.isRange) {
       const firstInput = (this.pickerInput.nativeElement as HTMLElement).querySelector(
@@ -121,6 +129,7 @@ export class NzPickerComponent implements AfterViewInit {
   showOverlay(): void {
     if (!this.realOpenState) {
       this.overlayOpen = true;
+      this.animationStart();
       this.openChange.emit(this.overlayOpen);
       setTimeout(() => {
         if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) {
@@ -211,7 +220,9 @@ export class NzPickerComponent implements AfterViewInit {
   }
 
   animationDone(): void {
-    this.animationOpenState = this.realOpenState;
+    if (!this.realOpenState) {
+      this.animationOpenState = false;
+    }
   }
 }
 

diff --git a/docs/i18n.zh-CN.md b/docs/i18n.zh-CN.md
@@ -8,7 +8,7 @@ title: 国际化
 
 ## 全局配置
 
-`ng-zorro-antd` 提供了几个配置型 token 用于全局配置国际化文案和日期，`NZ_I18N`用于国际化文案，`NZ_DATE_CONFIG`用于修改日期相关特性，。除此之外，我们默认使用Angular的语言包来进行日期格式化（需要引入相应的Angular语言包）。
+`ng-zorro-antd` 提供了几个配置型 token 用于全局配置国际化文案和日期，`NZ_I18N`用于国际化文案，`NZ_DATE_CONFIG`用于修改日期相关特性，除此之外，我们默认使用Angular的语言包来进行日期格式化（需要引入相应的Angular语言包）。
 
 另外，我们还提供了可选的`NZ_DATE_LOCALE`用于date-fns方式来格式化本地日期（依赖 [`date-fns`](https://date-fns.org/docs/I18n) 库，详见下方的`如何使用 date-fns 进行日期格式化`）。