問題:
當使用ngIfular 在使用時2.如果元素最初是隱藏的,為什麼CSS 過渡不起作用?
答案:
ngIf 在條件變成 false 時從 DOM 中刪除該元素。但是,過渡不能應用於不存在的元素。
解:
為了平滑過渡,請使用[hidden] 而不是[ngIf]:
<code class="typescript"><div class="note" [ngClass]="{'transition':show}" [hidden]="!show"></code>
這樣,元素保留在DOM 中,並且當其顯示屬性變更時可以套用轉換。
在 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中文網其他相關文章!