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>

动画与ng-if

1 个答案: