Question

我很难在角度ng-repeat列表中获取动画的css动画。我有一个吸烟者：http://plnkr.co/edit/KIcTiJ?p=preview

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

在任何一种情况下，当我点击该示例中的左右箭头时，是否有人可以建议更好的方法让我将角度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 动画的工作原理。