前言回顧

我們之前看了一些典型的元件原始碼，對相關元件的實現方式也有了一定的理解，但是我們也沒有想過，目前 NG-ZORRO 已支援近 60 種元件，那麼必然會出現重複程式碼的問題，比如多個元件可能都支援 nzSize 屬性、Animation 動畫甚至 Test 測試方法。

我們在閱讀程式碼過程中，發現了一些公共方法和定義被抽離到 core 資料夾：

components/core
├── addon
├── animation
├── config
├── dropdown
├── environments
├── highlight
├── index.ts
├── logger
├── no-animation
├── overlay
├── package.json
├── polyfill
├── public-api.ts
├── responsive
├── scroll
├── services
├── testing
├── time
├── trans-button
├── tree
├── types
├── util
└── wave

我們來看看幾個典型的方法設計方式。

通用屬性

types

我們在之前的專案中也多次遇到不同元件但是具有共同屬性的情況，比如 Input、Button 等元件均支援 nzSize 屬性，所以即使需要每個元件支援單獨引入，仍然不可能對每個支援該元件的屬性都去寫一遍定義，所以我們可以也可以通過 types 資料夾反查有哪些元件支援了這些屬性：

components/core/types
├── common-wrap.ts
├── direction.ts
├── drop-down-position.ts
├── index.ts
├── indexable.ts
├── ng-class.ts
├── public-api.ts
├── shape.ts
├── size.ts
└── template.ts

animation

動畫效果是 Angular 專案中使用較為廣泛的方法了，Angular 官方文件 也有較為詳細的說明，NG-ZORRO 已經建立了多種動畫，我們也可以直接哪來使用，讓我們的頁面更加豐富。

collapseMotion 摺疊

實現程式碼

export const collapseMotion: AnimationTriggerMetadata = trigger('collapseMotion', [
  state('expanded', style({ height: '*' })),
  state('collapsed', style({ height: 0, overflow: 'hidden' })),
  state('hidden', style({ height: 0, overflow: 'hidden', borderTopWidth: '0' })),
  transition('expanded => collapsed', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),
  transition('expanded => hidden', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),
  transition('collapsed => expanded', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),
  transition('hidden => expanded', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`))
]);

使用方式

Collapse 摺疊面板 元件演示瞭如何通過 collapseMotion 動畫實現展開收起狀態，我們看一下它是怎麼使用的：

<div class="ant-collapse-content"
  [class.ant-collapse-content-active]="nzActive"
  [@collapseMotion]="nzActive ? 'expanded' : 'hidden' ">
  <div class="ant-collapse-content-box">
    <ng-content></ng-content>
  </div>
</div>

通過 nzActive 屬性來變更動畫狀態，就可以運用此屬性了。

我們在自己的專案中一樣可以使用這個動畫，只要在 animations 引入就能使用了，看一個簡單實現：

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { collapseMotion, fadeMotion, moveUpMotion } from 'ng-zorro-antd';

@Component({
  selector: 'app-animations',
  templateUrl: './animations.component.html',
  styleUrls: ['./animations.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [collapseMotion],
})
export class AnimationsComponent implements OnInit {
  isActive = false;
  constructor() { }
  ngOnInit() {}
}

這樣我們就能在指定元素上使用，如下點選 .fade-header，.content 內容就會自動收起和展開：

<div class="fade-header" (click)="isActive=!isActive">
  <i nz-icon [nzType]="isActive ? 'down' : 'up'" nzTheme="outline"></i> Collapsed Header
</div>
<div class="content" [@collapseMotion]="isActive ? 'expanded' : 'hidden' ">
  <p>content</p>
  <p>content</p>
</div>

fadeMotion 淡入淡出

實現程式碼

export const fadeMotion: AnimationTriggerMetadata = trigger('fadeMotion', [
  transition(':enter', [style({ opacity: 0 }), animate(`${AnimationDuration.BASE}`, style({ opacity: 1 }))]),
  transition(':leave', [style({ opacity: 1 }), animate(`${AnimationDuration.BASE}`, style({ opacity: 0 }))])
]);

使用方式

Tag 元件 支援動態刪除時，則使用了淡入淡出動畫，這個動畫更容易使用，不需要我們傳遞狀態：

<div class="content" @fadeMotion *ngIf="isActive">
  <p>fade content</p>
  <p>fade content</p>
</div>

其他動畫

其他諸如 moveUpMotion、slideMotion 等同樣可以在原始碼中找到，使用方式也可以在相應的元件中找到。

nzNoAnimation 禁用動畫

當然，對於一些場景我們並不想使用動畫，NG-ZORRO 同樣通過了配置指令方式禁用：NzNoAnimationDirective。

<ul nz-menu nzNoAnimation></ul>

這樣在模板中就可以禁用，也可以在模組中使用 NoopAnimationsModule 替換 BrowserAnimationsModule 實現全域性禁用：

@NgModule({
  imports     : [
   ...,
   NoopAnimationsModule
  ]
})

總結 & 預告

今天我們介紹了部分 core 資料夾的內容，包含 types、animations，對於我們自己的專案最好也同樣抽離公共部分，實現多模組複用，避免程式碼重複。

相關資源

• Github 今日程式碼分支：https://github.com/simplejason/ng-zorro-ironman2020/tree/day-28-animations
• Angular 動畫：https://angular.cn/guide/animations