如何在 Angular 2 中對 ngIf 控制的元素進行動畫處理？

Angular 2 ngIf 和CSS 轉換/動畫

這個問題深入研究了在ngIf 操作的元素上執行CSS 轉換或動畫的挑戰Angular 2 中的指令。

問題

目標是使用 CSS 為元素從右側的入口設定動畫。然而，當最初使用 ngIf 隱藏元素時，轉換無法觸發。

解

關鍵問題在於 ngIf 的行為。當與 ngIf 關聯的表達式變為 false 時，該元素將從 DOM 中刪除。由於過渡和動畫要求元素存在於 DOM 中，因此將它們應用於未渲染的元素將無法發揮作用。

要解決此問題，建議使用hide 而不是ngIf 來隱藏

更新的解決方案（Angular 4.1.0 及更高版本）

在Angular 4.1.0 及更高版本中，首選方法是使用Angular 動畫。這是使用動畫的更新解決方案：

<code class="typescript">import { trigger, style, animate, transition } from '@angular/animations';

// ...

@Component({
  animations: [
    trigger(
      'enterAnimation', [
        transition(':enter', [
          style({ transform: 'translateX(100%)', opacity: 0 }),
          animate('500ms', style({ transform: 'translateX(0)', opacity: 1 }))
        ]),
        transition(':leave', [
          style({ transform: 'translateX(0)', opacity: 1 }),
          animate('500ms', style({ transform: 'translateX(100%)', opacity: 0 }))
        ])
      ]
    )
  ]
})

// ...

<div *ngIf="show" [@enterAnimation]></div></code>

此解決方案為名為「enterAnimation」的元件新增了一個觸發器，並定義了進入和離開狀態的轉換。過渡包括變換和不透明度的樣式，允許元素通過動畫從右側滑入。

請記住，此解決方案適用於 Angular 4.1.0 及更高版本。對於舊版本，使用隱藏仍然是建議的方法。

以上是如何在 Angular 2 中對 ngIf 控制的元素進行動畫處理？的詳細內容。更多資訊請關注PHP中文網其他相關文章！