4

我很难在角度ng-repeat列表中获得用于移动的 css 动画。我在这里有一个 plunker：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 动画，我希望避免这种情况。

4

1 回答 1

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动画工作方式。

于 2014-02-02T19:00:57.197 回答