我很难在角度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动画,我希望避免。
答案 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 动画的工作原理。