从已过滤列表中删除ng-repeat动画

我有一个列表，显示ng-repeat上的一个过滤器：同一个数组的两个不同部分：删除和未删除的项目。我不想有两个不同的列表，因此我正在过滤来自ng-repeat声明的数组。从已过滤列表中删除ng-repeat动画

当从查看列表中删除项目时，我希望它们使用淡出动画制作动画，并且它工作得很好。然而，2次之间切换时（改变列表中的过滤器），我不希望这样的动画，但ng-leave动画无论如何触发。

问：如何在点击“删除”按钮时保留动画，但在“可见”和“删除”过滤器之间切换时跳过动画？

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

工作plunkr： http://plnkr.co/edit/aeYCIu?p=preview

来源

2015-06-18 Haji

您好我贴过plunker检查。

仅增加

class="default-style" ng-class="{'repeat-item': myFilter === 'visible'}">

，并添加CSS类

.default-style{ 
    background: lightblue; 
    margin-bottom: 5px; 
    height: 40px; 
}

和一切工作

http://plnkr.co/edit/WgRYTjVLBNaxXNeXX5wG?p=preview

来源

2015-06-18 10:28:34

谢谢，但它并没有解决它：从“删除切换时“到”可见“列表项仍然是动画。 – Haji

当您单击删除动画发生（可见的删除）我测试过，但如果你点击可见没有动画发生（删除，可见）。 –

从已过滤列表中删除ng-repeat动画

回答

相关问题