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

Question

在Angular 1中，您可以將animate-show之類的CSS類與ng-show一起添加到元素，但是Angular 2的ngIf不能做到這一點，因為元素在隱藏時根本無法渲染。

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

在Angular 1中，您所需要做的就是向元素添加CSS類“ animate-show”，這很好。

在Angular 2中有實現此目的的簡便方法嗎？

Answer 1

您可以使用ngClass既有條件地也可以不在Angular中應用類名稱

例如

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

希望這能滿足您的需求。