在角度 1.2.x 中动画 ng-repeat ng-move

Question

我很难在角度 ng-repeat 列表中获得用于移动的 css 动画。我这里有个笨蛋：http://plnkr.co/edit/KIcTiJ?p=preview

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

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

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

Answer 1

ng-repeat 如果集合已更改，则动画工作。您可以使用$filter 来反映您对收藏的更改。

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

这里的filteredData 是一个控制器函数，它执行你的过滤器逻辑。 （您也可以编写自定义过滤器）

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

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