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

Question

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

从已查看列表中删除元素时，我希望它们使用淡出动画进行动画处理，效果很好。但是，当在 2 个 View 之间切换时(更改列表的过滤器)我不想要那个动画但是无论如何都会触发 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

Answer 1

嗨，我已经发布了 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