首頁  >  文章  >  web前端  >  如何在 Angular 2 中使用 ngIf 進行 CSS 轉換?

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

Patricia Arquette
Patricia Arquette原創
2024-10-31 21:17:29985瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn