带有 ng-if 的动画答案

【问题标题】：Animation with ng-if带有 ng-if 的动画
【发布时间】：2016-05-16 16:44:44
【问题描述】：

对于使用 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;
}

【问题讨论】：

标签： css angularjs animation

【解决方案1】：

您必须在ng-repeat 中使用ng-if 之类的

<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>

【讨论】：