fix(module: tree): fix animation of expand method (NG-ZORRO#2989)

hsuanxyz · Feb 28, 2019 · 2b52894 · 2b52894
1 parent 353164e
commit 2b52894
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 23 deletions.
diff --git a/components/tree/nz-tree-node.component.html b/components/tree/nz-tree-node.component.html
@@ -66,12 +66,10 @@
 
   <ul
     role="group"
-    class="ant-tree-child-tree"
-    [class.ant-tree-child-tree-open]="nzTreeNode.isExpanded"
-    [attr.data-expanded]="nzTreeNode.isExpanded"
-    [ngClass]="nzNodeChildrenClass"
+    class="ant-tree-child-tree ant-tree-child-tree-open"
+    data-expanded="true"
     [@.disabled]="noAnimation?.nzNoAnimation"
-    [@nodeState]="nzTreeNode.isExpanded ? 'active' : 'inactive'">
+    [@collapseMotion]="nzTreeNode.isExpanded ? 'expanded' : 'collapsed'">
     <nz-tree-node
       *ngFor="let node of nzTreeNode.getChildren(); trackBy: trackByFn"
       [nzTreeNode]="node"

diff --git a/components/tree/nz-tree-node.component.ts b/components/tree/nz-tree-node.component.ts
@@ -1,4 +1,3 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -20,6 +19,7 @@ import {
 } from '@angular/core';
 import { fromEvent, Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { collapseMotion } from '../core/animation/collapse';
 import { NzNoAnimationDirective } from '../core/no-animation/nz-no-animation.directive';
 import { InputBoolean } from '../core/util/convert';
 import { NzFormatBeforeDropEvent, NzFormatEmitEvent } from '../tree/interface';
@@ -32,21 +32,7 @@ import { isCheckDisabled } from './nz-tree-util';
   templateUrl        : './nz-tree-node.component.html',
   changeDetection    : ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
-  animations         : [
-    trigger('nodeState', [
-      state('inactive', style({
-        opacity: '0',
-        height : '0',
-        display: 'none'
-      })),
-      state('active', style({
-        opacity: '1',
-        height : '*'
-      })),
-      transition('inactive => active', animate('100ms ease-in')),
-      transition('active => inactive', animate('100ms ease-out'))
-    ])
-  ]
+  animations         : [ collapseMotion ]
 })
 
 export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
@@ -162,7 +148,6 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
   nzNodeCheckboxClass = {};
   nzNodeContentIconClass = {};
   nzNodeContentLoadingClass = {};
-  nzNodeChildrenClass = {};
 
   /**
    * drag var

diff --git a/components/tree/nz-tree.module.ts b/components/tree/nz-tree.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NzAddOnModule } from '../core/addon/addon.module';
 import { NzNoAnimationModule } from '../core/no-animation/nz-no-animation.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 import { NzTreeNodeComponent } from './nz-tree-node.component';
@@ -9,7 +10,8 @@ import { NzTreeComponent } from './nz-tree.component';
   imports: [
     CommonModule,
     NzIconModule,
-    NzNoAnimationModule
+    NzNoAnimationModule,
+    NzAddOnModule
   ],
   declarations: [
     NzTreeComponent,