使用ng-if動畫

Question

有點讓我頭腦發熱，使用Angularjs進行基本的淡入淡出。

我正在顯示使用ng-if從數據庫返回的值的結果，並且希望淡入結果，並在根據是否滿足此條件後再次單擊它時淡出結果（ng-if="detail.categoryId === expense.categoryId"）因爲我現在它已經淡入，然後在點擊一次後立即淡出。

HTML

<div class="row expenseBreakdown fade" ng-if="detail.categoryId === expense.categoryId" ng-repeat="detail in expensesDetail"> 
    <div class="col-md-3">{{detail.expenseDetail}}</div> 
    <div class="col-md-3">{{detail.dateExpense|date}}</div> 
    <div class="col-md-3">{{detail.expenseAmount|currency:"R"}</div> 
</div> 

CSS

.fade.ng-enter { 
    transition:0.5s linear all; 
    opacity:0; 
} 

/* The finishing CSS styles for the enter animation */ 
.fade.ng-enter.ng-enter-active { 
    opacity:1; 
} 

Answer 1

你必須使用ng-if內ng-repeat像

<div class="row expenseBreakdown fade" ng-repeat="detail in expensesDetail"> 
<div class="fade ng-enter ng-enter-active" ng-if="detail.categoryId == expense.categoryId"> 
    <div class="col-md-3">{{detail.expenseDetail}}</div> 
    <div class="col-md-3">{{detail.dateExpense|date}}</div> 
    <div class="col-md-3">{{detail.expenseAmount|currency:"R"}}</div> 
</div> 
<div class="fade ng-enter" ng-if="detail.categoryId != expense.categoryId"> 
    <div class="col-md-3">{{detail.expenseDetail}}</div> 
    <div class="col-md-3">{{detail.dateExpense|date}}</div> 
    <div class="col-md-3">{{detail.expenseAmount|currency:"R"}}</div> 
</div> 
</div>