angularjs - 在 angular 1.2.x 中动画 ng-repeat ng-move

Question

我很难获得一个 css 动画以进行有 Angular 的运动 ng-repeat列表。我这里有一个 plunker:http://plnkr.co/edit/KIcTiJ?p=preview

如您所见，ng-enter首次加载 plunker 时会处理动画。但是，我找不到任何方法来触发列表移动的动画。在这个例子中，通过点击箭头，ng-hide 被处理，我希望 ng-move 动画被触发，但我想知道我是否误解了 ng-repeat move 动画是如何触发的。

在任何一种情况下，当我单击该示例中的左右箭头时，有人可以为我建议一种更好的方法来将 Angular 1.2 动画应用于此列表吗？我尝试了生成 ng-repeat 的替代方法(我可以使用 Angular 过滤器而不是 ng-hide)，并且我尝试了不同的 css 转换，但我似乎无法得到任何工作。关于如何进步，这里的任何建议将不胜感激。

对不起，如果这个问题看起来像重复，但我在stackoverflow上查看了类似的问题，但我能找到的唯一其他答案是针对较旧的 Angular 动画框架，或建议的自定义javascript动画，我希望避免这种情况。

Answer 1

ng-repeat如果集合已更改，则动画工作。您可以使用 $filter以反射(reflect)您在集合中的更改。

<li ng-class="{'text-danger': item == f}" ng-repeat="item in items| filter: filteredData" class="animate-repeat">
  <span>{{item}}</span>
</li>

这里filteredData是执行过滤器逻辑的 Controller 功能。 (您也可以编写自定义过滤器)

  $scope.filteredData = function(item) {
    return (Math.abs($scope.f - item) < 2);
  }

检查更新 Plunker动画是如何工作的。