从过滤列表中删除时的 ng-repeat 动画答案

【问题标题】：ng-repeat animation on delete from filtered list从过滤列表中删除时的 ng-repeat 动画
【发布时间】：2015-06-18 18:28:34
【问题描述】：

我有一个列表，通过在 ng-repeat 上使用过滤器显示同一数组的 2 个不同部分：已删除和未删除的项目。我不想有 2 个不同的列表，因此我从 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;
}

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

【问题讨论】：

标签： javascript css angularjs animation angularjs-ng-repeat

【解决方案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

【讨论】：

谢谢，但这并没有解决：当从“已删除”切换到“可见”时，列表项仍然是动画的。
当你点击删除动画时我已经检查过（删除可见），但如果你点击可见没有动画发生（删除可见）。