如何在angularjs中将动画与ng-repeat一起使用

一尘不染

如何在angularjs中将动画与ng-repeat一起使用

angularjs

我有一个列表，可以使用ng-
repeat进行迭代：用户可以使用上箭头和下箭头图标与列表项进行交互，单击它们后，我只需更改“列表”中元素的顺序”，这就是角度建议更改模型并自动将更改反映在视图中的原因。

<div ng-repeat="item in list">
{{item.name}} 
<div class="icon-up-arrow" ng-click="moveUp($index);"></div> 
<div class="icon-down-arrow" ng-click="moveDown($index);"></div>
</div>

moveUp中的逻辑：-

$scope.moveUp= function(position){
 var temp=list[position-1];
 list[position-1]=list[position];
 list[position=temp];
};

上面的代码完全可以正常工作，向下移动项目的逻辑与此类似。但是我要解决的问题是如何放置动画？我知道angular会自行处理绑定视图和模型的问题，但是当按下向下箭头图标更新视图时，有什么方法可以放入动画中？

阅读 249

2020-07-04

共1个答案

一尘不染

接下来是Marcel的评论：在AngularJS 1.2中，您不需要使用ng-animate指令。代替：

包括angular-animate[-min].js。
使您的模块依赖ngAnimate。
使用类.ng-enter和类.ng-enter-active在CSS中定义转换。
ng-repeat照常使用。

HTML：

<div ng-app="foo">
    <!-- Set up controllers etc, and then: -->
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>

JavaScript：

angular.module('foo', ['ngAnimate']);
// controllers not shown

CSS：

li {
    opacity: 1;
}
li.ng-enter {
    -webkit-transition: 1s;
    transition: 1s;
    opacity: 0;
}
li.ng-enter-active {
    opacity: 1;
}

在（其他人的）Plunker中进行演示。

有关各种CSS类的进度的详细信息，请参阅有关$
animate的文档。

2020-07-04