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 動畫。這是使用動畫的更新解決方案:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
此解決方案為名為「enterAnimation」的元件新增了一個觸發器,並定義了進入和離開狀態的轉換。過渡包括變換和不透明度的樣式,允許元素通過動畫從右側滑入。
請記住,此解決方案適用於 Angular 4.1.0 及更高版本。對於舊版本,使用隱藏仍然是建議的方法。
以上是如何在 Angular 2 中對 ngIf 控制的元素進行動畫處理?的詳細內容。更多資訊請關注PHP中文網其他相關文章!