如何在Angular 2中的ngIf上添加顯示/隱藏動畫？

Question

在角1，你可以像動畫放映添加CSS類的元素與NG秀一起，但同樣不能與角2的ngIf來完成，因爲該元素不會被渲染完全隱藏。在角1用於動畫放映

CSS：

.animate-show.ng-hide-add, .animate-show.ng-hide-remove, .animate-hide.ng- 
hide-add, .animate-hide.ng-hide-remove { 
    transition: all linear 0.2s; 
} 
.animate-show.ng-hide-add-active, 
.animate-show.ng-hide-remove-active, 
.animate-hide.ng-hide-add-active, 
.animate-hide.ng-hide-remove-active { 
    /* the transition is defined in the active class */ 
    transition: 1s linear all; 
} 
.animate-show.ng-hide-add, .animate-show.ng-hide-remove { 
    transition: all linear 0.2s; 
} 
.animate-show.ng-hide { 
    line-height: 0; 
    opacity: 0; 
    padding: 0 2px; 
} 

在角1，所有你需要的是一個CSS類「動畫秀」添加的元素，它是好去。

有沒有一種簡單的方法在Angular 2中實現這一點？

Answer 1

您可以使用ngClass在角

兩個條件，而不是將類名，例如

[ngClass]="'someClass'"> 

條件

[ngClass]="{'someClass': property1.isValid"> 

多重條件

[ngClass]="{'someClass': property1.isValid && property2.isValid}"> 

您也可以執行方法表達

[ngClass]="getSomeClass()" 

getSomeClass(){ 
     const isValid=this.property1 && this.property2; 
     return {someClass1:isValid , someClass2:isValid}; 
    } 

我希望這成爲你的需要。