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

时间:2014-02-02 17:06:35

标签: angularjs ng-animate

我很难在角度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动画,我希望避免。

1 个答案:

答案 0 :(得分: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 动画的工作原理。