我使用ng-repeat使用orderBy过滤器渲染对象列表，如下所示：
< li class =“list-item”ng-repeat =“item in items | orderBy：predicate：reverse”>
我试图ng动画列表的排序变化已经证明令人沮丧，不值得分享。我看到了Yearofmoo示例应用程序here。
不幸的是，这个演示不是我想要实现的。我需要动画一个给定的列表项的X位置，当它被放置在一个新的orderBy定义更改后的顺序。我试图用css转换和绝对定位完成这一点，但是ng-repeat似乎重新创建orderBy上的列表项，使动画成为一个真正的挑战。
>这是可能与ng-repeat | orderBy(有或没有
ng-animate)？
>你能建议一种方法或提供一个例子吗？
所以，即使@Alex奥斯本已经表明一种方式来做你想要的评论，这里是我的尝试：
angular.module('StackApp',[]).controller('MainCtrl',function($scope) {
'use strict';
$scope.reverse = 'false';
$scope.myList = [{
id: 0,text: 'HTML5 Boilerplate'
},{
id: 1,text: 'AngularJS'
},{
id: 2,text: 'Karma'
},{
id: 3,text: 'Hello'
},{
id: 4,text: 'World'
},{
id: 5,text: 'How'
},{
id: 6,text: 'Are'
},{
id: 7,text: 'You'
},{
id: 8,text: '?'
},{
id: 9,text: 'I'
},{
id: 10,text: 'write'
},{
id: 11,text: 'more'
},{
id: 12,text: 'to'
},{
id: 13,text: 'make'
},{
id: 14,text: 'the'
},{
id: 15,text: 'list'
},{
id: 16,text: 'longer'
}];
$scope.$watch('reverse',function() {
$scope.setOrder();
});
$scope.setOrder = function() {
if ($scope.reverse === 'random') {
var t = [];
for (var i = 0; i < $scope.myList.length; i++) {
var r = Math.floor(Math.random() * $scope.myList.length);
while (inArray(t,r)) {
r = Math.floor(Math.random() * $scope.myList.length);
}
t.push(r);
$scope.myList[i].order = r;
}
} else {
for (var i = 0; i < $scope.myList.length; i++) {
if ($scope.reverse === 'false') {
$scope.myList[i].order = i;
} else {
$scope.myList[i].order = ($scope.myList.length - 1 - i);
}
}
}
};
function inArray(a,value) {
for (var i = 0; i < a.length; i++) {
if (a[i] === value) {
return true;
}
}
return false;
}
});
#list {
/* Needed,otherwise items would be at top of the page (see below) */
position: absolute;
/* full width,or it would look strange */
width: 100%;
}
#list li {
position: absolute;
/* Top: 0; this will be changed for every single list item by AngularJS */
top: 0;
/* Item height; hold this in sync with template file */
height: 40px;
/* Simple transition */
-webkit-transition: top 0.5s ease-in-out;
-moz-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="StackApp">
<div ng-controller="MainCtrl">
<h1>Animate Order</h1>
<form action="">
<label for="reverse">reverse = true</label>
<br>
<input type="radio" value="true" name="reverse" ng-model="reverse">
<br>
<br>
<label for="reverse">reverse = false</label>
<br>
<input type="radio" value="false" name="reverse" ng-model="reverse">
<br>
<br>
<label for="reverse">reverse = random (click button below to shuffle again)</label>
<br>
<input type="radio" value="random" name="reverse" ng-model="reverse">
</form>
<br>
<br>
<input type="button" ng-click="reverse = 'random';setOrder()" value="setOrder()">
<br>
<br>
<ul id="list" ng-style="{height: ((myList.length * 40) + 'px')}">
<li ng-repeat="item in myList" ng-style="{top: ((item.order * 40) + 'px')}">{{$index}} - {{item.order}}. {{item.text}}</li>
</ul>
</div>
</div>
因此，AngularJS不会对项目进行排序，但它会更改CSS属性顶部(ng-style =“{top：…}”)。 AngularJS不重建列表，我们得到一个不错的动画。
