Angular 2のngIfにアニメーションの表示/非表示を追加するには？アンギュラ1では

Question

、あなたはNG-ショーとともに要素にアニメーションショーのようなCSSクラスを追加することもできますが、要素がレンダリングされていないので、同じことが角度2のngIfで行うことができませんすべて隠されている間。アニメイト・ショーのために角度1で使用し

CSS：アンギュラ1では

.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; 
} 

、あなたが必要とするすべての要素に「-ショーをアニメーション化」し、それが行くように良いことだCSSクラスを追加することです。

角度2でこれを達成する簡単な方法はありますか？

Answer 1

あなたは

[ngClass]="'someClass'"> 

条件例

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

複数の条件に対する角度

の両方で、条件付きではなく、クラス名を適用するためにngClassを使用することができます

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

また、あなたが、私はこれがあなたのニーズを満たす願う表現

[ngClass]="getSomeClass()" 

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

ような方法を実行することができます。