Animation with ng-if - css

Question

Am a bit stuck with getting my head around a basic fade-in and fade-out using Angularjs.
I am displaying the results of values I am returning from a database using the ng-if and want to fade in the results and fade it out upon clicking it again, based on whether this condition is met (ng-if="detail.categoryId === expense.categoryId") As I have it now it fades in and then immediately fades out again when clicking on it once.
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

You have to use ng-if inside ng-repeat like
<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>