如何透過 Angular 2 的 ngIf 指令使用 CSS 轉換和動畫？

Angular 2 ngIf 和CSS 轉換/動畫

Angular 2 的ngIf 指令通常用於根據給定表達式有條件地渲染元素指令。但是，在這些元素上使用 CSS 轉換或動畫時，可能會出現意外行為。

請考慮以下程式碼片段：

// ...
<div class="note" [ngClass]="{'transition':show}" *ngIf="show">
  <p> Notes</p>
</div>
// ...

在此範例中，目標是讓 div 元素當 show 設定為 true 時，使用 CSS 從右側滑入。 *ngIf 指令確保僅當 show 為 true 時才渲染元素，但當 show 為 false 時，該元素會從 DOM 中完全刪除。

出現此問題是因為 CSS 動畫或轉場要求目標元素在動畫持續期間出現在 DOM 中。由於 *ngIf 在 show 為 false 時刪除元素，因此 CSS 中定義的任何過渡都不會生效。

解決方案：

要解決此問題，建議使用 [hidden] 屬性而不是 ngIf 來隱藏應該動畫的元素。

// ...
<div class="note" [ngClass]="{'transition':show}" [hidden]="!show">
  <p> Notes</p>
</div>
// ...

透過使用 [hidden]，該元素仍然存在於 DOM 中，但其可見性設定為「隱藏」當顯示為假時。這確保了該元素可用於要套用的 CSS 動畫或轉場。

以上是如何透過 Angular 2 的 ngIf 指令使用 CSS 轉換和動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！