如何在 Angular 2 中使用 ngIf 進行 CSS 轉換？-css教學-PHP中文網

如何在 Angular 2 中使用 ngIf 進行 CSS 轉換？

Patricia Arquette

發布： 2024-10-31 21:17:29

原創

1098 人瀏覽過

How to Make CSS Transitions Work with ngIf in Angular 2?

Angular 2 中的ngIf 和CSS 過渡/動畫

問題：

當使用ngIfular 在使用時2.如果元素最初是隱藏的，為什麼CSS 過渡不起作用？

答案：

ngIf 在條件變成 false 時從 DOM 中刪除該元素。但是，過渡不能應用於不存在的元素。

解：

為了平滑過渡，請使用[hidden] 而不是[ngIf]：

<code class="typescript"><div class="note" [ngClass]="{'transition':show}" [hidden]="!show"></code>

登入後複製

這樣，元素保留在DOM 中，並且當其顯示屬性變更時可以套用轉換。

使用 Angular 動畫更新解決方案

在 Angular 4.1.0 和 2.1 中.0，Angular 動畫提供了一種改進的方法來使用 ngIf 實現過渡。

Angular 4.1.0 以上版本：

<code class="typescript">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}))
  ])
])</code>

登入後複製

Angular 2.1.0 :

使用此方法2.1.0 中引入的animate() 輔助函數。有關更多詳細信息，請參閱 Angular 動畫文檔。

以上是如何在 Angular 2 中使用 ngIf 進行 CSS 轉換？的詳細內容。更多資訊請關注PHP中文網其他相關文章！