feat(module:all): support disable animations in every components

close NG-ZORRO#2401, close NG-ZORRO#2922

components/auto-complete/nz-autocomplete.component.html

@@ -1,6 +1,7 @@
 <ng-template>
   <div class="ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft"
     #panel
+    [nzNoAnimation]="noAnimation?.nzNoAnimation"
     [@slideMotion]="dropDownPosition"
     [class.ant-select-dropdown-hidden]="!showPanel" [ngClass]="nzOverlayClassName" [ngStyle]="nzOverlayStyle">
     <div style="overflow: auto;">

components/auto-complete/nz-autocomplete.component.ts

@@ -6,16 +6,23 @@ import {
   ContentChildren,
   ElementRef,
   EventEmitter,
-  Input, NgZone, OnDestroy,
+  Host,
+  Input,
+  NgZone,
+  OnDestroy,
+  Optional,
   Output,
   QueryList,
   TemplateRef,
-  ViewChild, ViewChildren, ViewEncapsulation
+  ViewChild,
+  ViewChildren,
+  ViewEncapsulation
 } from '@angular/core';
 import { defer, merge, Observable, Subscription } from 'rxjs';
 import { filter, switchMap, take } from 'rxjs/operators';
 
 import { slideMotion } from '../core/animation/slide';
+import { NzNoAnimationDirective } from '../core/no-animation/nz-no-animation.directive';
 import { NzDropDownPosition } from '../core/types/drop-down-position';
 import { InputBoolean } from '../core/util/convert';
 import { NzAutocompleteOptionComponent, NzOptionSelectionChange } from './nz-autocomplete-option.component';
@@ -37,7 +44,7 @@ export type AutocompleteDataSource = AutocompleteDataSourceItem[] | string[] | n
     slideMotion
   ],
   styles             : [
-      `
+    `
       .ant-select-dropdown {
         top: 100%;
         left: 0;
@@ -99,7 +106,8 @@ export class NzAutocompleteComponent implements AfterViewInit, OnDestroy {
     .pipe(take(1), switchMap(() => this.optionSelectionChanges));
   });
 
-  constructor(private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone) {
+  constructor(private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone,
+              @Host() @Optional() public noAnimation: NzNoAnimationDirective) {
   }
 
   ngAfterViewInit(): void {

components/auto-complete/nz-autocomplete.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { NzAddOnModule } from '../core/addon/addon.module';
+import { NzNoAnimationModule } from '../core/no-animation/nz-no-animation.module';
 
 import { NzAutocompleteOptgroupComponent } from './nz-autocomplete-optgroup.component';
 import { NzAutocompleteOptionComponent } from './nz-autocomplete-option.component';
@@ -13,7 +14,7 @@ import { NzAutocompleteComponent } from './nz-autocomplete.component';
 @NgModule({
   declarations: [NzAutocompleteComponent, NzAutocompleteOptionComponent, NzAutocompleteTriggerDirective, NzAutocompleteOptgroupComponent],
   exports: [NzAutocompleteComponent, NzAutocompleteOptionComponent, NzAutocompleteTriggerDirective, NzAutocompleteOptgroupComponent],
-  imports: [CommonModule, OverlayModule, FormsModule, NzAddOnModule]
+  imports: [CommonModule, OverlayModule, FormsModule, NzAddOnModule, NzNoAnimationModule]
 })
 export class NzAutocompleteModule {
 }

components/cascader/nz-cascader.component.html

@@ -62,6 +62,7 @@
     [class.ant-cascader-menus-hidden]="!menuVisible"
     [ngClass]="menuCls"
     [ngStyle]="nzMenuStyle"
+    [nzNoAnimation]="noAnimation?.nzNoAnimation"
     [@slideMotion]="dropDownPosition"
     (mouseleave)="onTriggerMouseLeave($event)">
     <ul *ngFor="let options of columns; let i = index;" class="ant-cascader-menu"

components/cascader/nz-cascader.component.ts

@@ -7,9 +7,11 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  Host,
   HostListener,
   Input,
   OnDestroy,
+  Optional,
   Output,
   Renderer2,
   TemplateRef,
@@ -19,6 +21,7 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { slideMotion } from '../core/animation/slide';
+import { NzNoAnimationDirective } from '../core/no-animation/nz-no-animation.directive';
 import { DEFAULT_CASCADER_POSITIONS } from '../core/overlay/overlay-position';
 import { NgClassType } from '../core/types/ng-class';
 import { arraysEqual, toArray } from '../core/util/array';
@@ -811,7 +814,8 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
     this.setMenuVisible(false);
   }
 
-  constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, renderer: Renderer2) {
+  constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, renderer: Renderer2,
+              @Host() @Optional() public noAnimation: NzNoAnimationDirective) {
     renderer.addClass(elementRef.nativeElement, 'ant-cascader');
     renderer.addClass(elementRef.nativeElement, 'ant-cascader-picker');
   }

components/cascader/nz-cascader.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
+import { NzNoAnimationModule } from '../core/no-animation/nz-no-animation.module';
 import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 import { NzEmptyModule } from '../empty/nz-empty.module';
 import { NzIconModule } from '../icon/nz-icon.module';
@@ -11,7 +12,7 @@ import { NzCascaderOptionComponent } from './nz-cascader-li.component';
 import { NzCascaderComponent } from './nz-cascader.component';
 
 @NgModule({
-  imports     : [ CommonModule, FormsModule, OverlayModule, NzInputModule, NzIconModule, NzEmptyModule, NzOverlayModule ],
+  imports     : [ CommonModule, FormsModule, OverlayModule, NzInputModule, NzIconModule, NzEmptyModule, NzOverlayModule, NzNoAnimationModule ],
   declarations: [
     NzCascaderComponent,
     NzCascaderOptionComponent

components/core/no-animation/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

components/core/no-animation/nz-no-animation.directive.ts

@@ -0,0 +1,38 @@
+import { coerceElement } from '@angular/cdk/coercion';
+import { AfterViewInit, Directive, ElementRef, Input, OnChanges, Renderer2 } from '@angular/core';
+import { InputBoolean } from '../util/convert';
+
+const DISABLED_CLASSNAME = 'nz-animate-disabled';
+
+@Directive({
+  selector: '[nzNoAnimation]',
+  host    : {
+    '[@.disabled]': 'nzNoAnimation'
+  }
+})
+export class NzNoAnimationDirective implements OnChanges, AfterViewInit {
+
+  @Input() @InputBoolean() nzNoAnimation: boolean = false;
+
+  constructor(private element: ElementRef, private renderer: Renderer2) {
+  }
+
+  ngOnChanges(): void {
+    this.updateClass();
+  }
+
+  ngAfterViewInit(): void {
+    this.updateClass();
+  }
+
+  private updateClass(): void {
+    const element = coerceElement(this.element);
+    if (!element) { return; }
+    if (this.nzNoAnimation) {
+      this.renderer.addClass(element, DISABLED_CLASSNAME);
+    } else {
+      this.renderer.removeClass(element, DISABLED_CLASSNAME);
+    }
+  }
+
+}

components/core/no-animation/nz-no-animation.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NzNoAnimationDirective } from './nz-no-animation.directive';
+
+@NgModule({
+  declarations: [ NzNoAnimationDirective ],
+  exports     : [ NzNoAnimationDirective ],
+  imports     : [ CommonModule ]
+})
+export class NzNoAnimationModule {
+}

components/core/no-animation/public-api.ts

@@ -0,0 +1,2 @@
+export { NzNoAnimationModule } from './nz-no-animation.module';
+export { NzNoAnimationDirective } from './nz-no-animation.directive';

components/core/style/index.less

@@ -195,3 +195,59 @@ textarea.cdk-textarea-autosize-measuring {
   padding: 2px 0 !important;
   box-sizing: content-box !important;
 }
+
+
+.nz-animate-disabled {
+
+  // drawer
+  &.ant-drawer {
+    &.ant-drawer-open .ant-drawer-mask {
+      animation: none;
+      transition: none;
+    }
+    & > * {
+      transition: none;
+    }
+  }
+
+  // modal
+  .ant-modal-mask, .ant-modal {
+    animation: none;
+    transition: none;
+    &.zoom-enter, &.zoom-leave,
+    &.zoom-enter-active, &.zoom-leave-active {
+      animation: none;
+      transition: none;
+    }
+  }
+
+  // menu
+  &.ant-menu {
+    transition: none;
+    .ant-menu-item, .ant-menu-submenu-title {
+      transition: none;
+    }
+    .ant-menu-item .anticon, .ant-menu-submenu-title .anticon {
+      transition: none;
+      & + span {
+        transition: none;
+      }
+    }
+  }
+
+  // tabs
+  &.ant-tabs {
+    .ant-tabs-top-content.ant-tabs-content-animated,
+    .ant-tabs-bottom-content.ant-tabs-content-animated,
+    .ant-tabs-top-content > .ant-tabs-tabpane,
+    .ant-tabs-bottom-content > .ant-tabs-tabpane,
+    &.ant-tabs-left .ant-tabs-ink-bar-animated,
+    &.ant-tabs-right .ant-tabs-ink-bar-animated,
+    &.ant-tabs-top .ant-tabs-ink-bar-animated,
+    &.ant-tabs-bottom .ant-tabs-ink-bar-animated {
+      transition: none;
+    }
+  }
+
+
+}

components/date-picker/abstract-picker.component.ts

@@ -13,6 +13,7 @@ import { ControlValueAccessor } from '@angular/forms';
 
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { NzNoAnimationDirective } from '../core/no-animation/nz-no-animation.directive';
 import { InputBoolean } from '../core/util/convert';
 import { DateHelperService } from '../i18n/date-helper.service';
 import { NzDatePickerI18nInterface } from '../i18n/nz-i18n.interface';
@@ -60,7 +61,7 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
   protected destroyed$: Subject<void> = new Subject();
   protected isCustomPlaceHolder: boolean = false;
 
-  constructor(protected i18n: NzI18nService, protected cdr: ChangeDetectorRef, protected dateHelper: DateHelperService) { }
+  constructor(protected i18n: NzI18nService, protected cdr: ChangeDetectorRef, protected dateHelper: DateHelperService, public noAnimation: NzNoAnimationDirective) { }
 
   ngOnInit(): void {
     // Subscribe the every locale change if the nzLocale is not handled by user

components/date-picker/date-picker.component.ts

@@ -4,13 +4,17 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  Host,
+  Optional,
   Renderer2,
   ViewEncapsulation
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NzI18nService } from '../i18n/nz-i18n.service';
 
+import { NzNoAnimationDirective } from '../core/no-animation/nz-no-animation.directive';
 import { DateHelperService } from '../i18n/date-helper.service';
+import { NzI18nService } from '../i18n/nz-i18n.service';
+
 import { DateRangePickerComponent } from './date-range-picker.component';
 
 @Component({
@@ -28,8 +32,9 @@ import { DateRangePickerComponent } from './date-range-picker.component';
 export class NzDatePickerComponent extends DateRangePickerComponent {
   isRange: boolean = false;
 
-  constructor(i18n: NzI18nService, cdr: ChangeDetectorRef, dateHelper: DateHelperService, renderer: Renderer2, elementRef: ElementRef) {
-    super(i18n, cdr, dateHelper);
+  constructor(i18n: NzI18nService, cdr: ChangeDetectorRef, dateHelper: DateHelperService, renderer: Renderer2, elementRef: ElementRef,
+              @Host() @Optional() public noAnimation: NzNoAnimationDirective) {
+    super(i18n, cdr, dateHelper, noAnimation);
     renderer.addClass(elementRef.nativeElement, 'ant-calendar-picker');
   }
 }

components/date-picker/date-picker.module.ts

@@ -2,6 +2,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { NzNoAnimationModule } from '../core/no-animation/nz-no-animation.module';
 import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 
@@ -22,7 +23,8 @@ import { NzYearPickerComponent } from './year-picker.component';
     OverlayModule,
     LibPackerModule,
     NzIconModule,
-    NzOverlayModule
+    NzOverlayModule,
+    NzNoAnimationModule
   ],
   exports: [
     NzDatePickerComponent,

components/date-picker/date-range-picker.component.html

@@ -11,6 +11,7 @@
   [placeholder]="nzPlaceHolder"
   [size]="nzSize"
   [style]="pickerStyle"
+  [noAnimation]="noAnimation?.nzNoAnimation"
   (openChange)="onOpenChange($event)"
 >
   <date-range-popup *ngIf="realOpenState"

components/date-picker/date-range-picker.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef } from '@angular/core';
 
+import { NzNoAnimationDirective } from '../core/no-animation/nz-no-animation.directive';
 import { FunctionProp } from '../core/types/common-wrap';
 import { toBoolean, valueFunctionProp, InputBoolean } from '../core/util/convert';
 import { NzI18nService } from '../i18n/nz-i18n.service';
@@ -39,8 +40,8 @@ export class DateRangePickerComponent extends AbstractPickerComponent implements
   pickerStyle: object; // Final picker style that contains width fix corrections etc.
   extraFooter: TemplateRef<void> | string;
 
-  constructor(i18n: NzI18nService, cdr: ChangeDetectorRef, dateHelper: DateHelperService) {
-    super(i18n, cdr, dateHelper);
+  constructor(i18n: NzI18nService, cdr: ChangeDetectorRef, dateHelper: DateHelperService, noAnimation: NzNoAnimationDirective) {
+    super(i18n, cdr, dateHelper, noAnimation);
   }
 
   ngOnInit(): void {

components/date-picker/header-picker.component.html

@@ -11,6 +11,7 @@
   [placeholder]="nzPlaceHolder"
   [size]="nzSize"
   [style]="nzStyle"
+  [noAnimation]="noAnimation?.nzNoAnimation"
   (openChange)="onOpenChange($event)"
 >
   <div *ngIf="realOpenState">

components/date-picker/header-picker.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
 
+import { NzNoAnimationDirective } from '../core/no-animation/nz-no-animation.directive';
 import { FunctionProp } from '../core/types/common-wrap';
 import { valueFunctionProp } from '../core/util/convert';
 import { DateHelperService } from '../i18n/date-helper.service';
@@ -28,8 +29,8 @@ export class HeaderPickerComponent extends AbstractPickerComponent implements On
 
   private supportPanels: PanelMode[];
 
-  constructor(i18n: NzI18nService, cdr: ChangeDetectorRef, dateHelper: DateHelperService) {
-    super(i18n, cdr, dateHelper);
+  constructor(i18n: NzI18nService, cdr: ChangeDetectorRef, dateHelper: DateHelperService, noAnimation: NzNoAnimationDirective) {
+    super(i18n, cdr, dateHelper, noAnimation);
   }
 
   ngOnInit(): void {

components/date-picker/month-picker.component.ts

@@ -6,9 +6,11 @@ import {
   ElementRef,
   Input,
   Renderer2,
-  ViewEncapsulation
+  ViewEncapsulation, Host, Optional
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { NzNoAnimationDirective } from '../core/no-animation/nz-no-animation.directive';
 import { NzI18nService } from '../i18n/nz-i18n.service';
 
 import { DateHelperService } from '../i18n/date-helper.service';
@@ -31,8 +33,9 @@ export class NzMonthPickerComponent extends HeaderPickerComponent {
 
   endPanelMode: SupportHeaderPanel = 'month';
 
-  constructor(i18n: NzI18nService, cdr: ChangeDetectorRef, dateHelper: DateHelperService, renderer: Renderer2, elementRef: ElementRef) {
-    super(i18n, cdr, dateHelper);
+  constructor(i18n: NzI18nService, cdr: ChangeDetectorRef, dateHelper: DateHelperService, renderer: Renderer2, elementRef: ElementRef,
+              @Host() @Optional() public noAnimation: NzNoAnimationDirective) {
+    super(i18n, cdr, dateHelper, noAnimation);
     renderer.addClass(elementRef.nativeElement, 'ant-calendar-picker');
   }
 }

components/date-picker/picker.component.html

@@ -79,6 +79,7 @@
   (detach)="onOverlayDetach()"
 >
   <div
+    [nzNoAnimation]="noAnimation"
     [@slideMotion]="dropdownAnimation"
     (@slideMotion.start)="animationStart()"
     (@slideMotion.done)="animationDone()"