Question

我有一个列表，通过使用ng-repeat上的过滤器显示同一阵列的2个不同部分：已删除和未删除的项目。我不想拥有2个不同的列表，因此我在ng-repeat声明中过滤了数组。

从已查看列表中删除项目时，我希望它们使用淡出动画进行动画制作，并且工作正常。但是，当在两个视图之间切换（更改列表的过滤器）时，我不想要那个动画，但无论如何都会触发ng-leave动画。

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

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

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

Answer 1

你好我发布了plunker check。

添加

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

从过滤后的列表

1 个答案: