angularjs – 以角度1.2.x为动画的ng-repeat ng-move

发布时间：2020-12-17 16:58:23 所属栏目：安全来源：网络整理

导读：我很难在角度ng重复列表中获取css动画以进行移动.我这里有一个吸烟者： http://plnkr.co/edit/KIcTiJ?p=preview 如您所见,首次加载plunker时会处理ng-enter动画.但是,我找不到任何方法让列表移动触发动画.在示例中,通过单击箭头,处理ng-hide,我希望触发ng-mo

我很难在角度ng重复列表中获取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动画,我希望避免.

解决方法

如果集合已更改,则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动画如何工作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!