I have a unique challenge where I need to display two different sections of an array in a single list by applying a filter within the ng-repeat. Instead of having two separate lists, I am filtering the array directly within the ng-repeat statement.
While removing items from the list, I want them to fade out smoothly using a fade-out animation, which is working as expected. However, when switching between the two views (changing the filter), I do not want the animation to be triggered, yet the ng-leave animation still occurs.
Q: How can I maintain the delete button animation while skipping the animation effect when toggling between the "visible" and "deleted" filters?
HTML:
<div ng-init="myFilter='visible'">Filter:
<button ng-class="{'active':myFilter==='visible'}" ng-click="myFilter='visible'">Visible</button>
<button ng-class="{'active':myFilter==='deleted'}" ng-click="myFilter='deleted'">Deleted</button>
</div>
<div ng-controller="myCtrl" >
<div ng-repeat="item in (items | filter:{deleted: (myFilter==='deleted'?true:false) } )" class="repeat-item">
{{item}} <div class="delete" ng-show="myFilter==='visible'" ng-click="remove($index)">delete</div>
</div>
</div>
CSS:
.repeat-item.ng-leave {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.repeat-item.ng-leave.ng-leave-active {
opacity: 0;
height: 0px;
}
.repeat-item.ng-leave {
opacity: 1;
height: 30px;
}
Working plunkr: http://plnkr.co/edit/aeYCIu?p=preview