Angularjs ngAnimate用于对ng重复进行平滑排序的示例？

我想看一个使用angular animate（1.2x）对列表排序的功能示例。（我只在互联网上遇到过破损的小提琴等）：

给定数组[A，B，C]和以后的[C，B，A]的ng重复应该：

• 将A移到底部
• 将C移到顶部
• 保持B的位置

（使用CSS绝对顶部定位或类似方式。）

---

使用交错（过渡延迟）的示例是一个额外的好处。

看看这个，它非常简单： CSS:

HTML:

顶级动画
文件。写（“”）；

问题 实现你想要的可能有点棘手

常见的尝试是使用

ng style

根据元素在列表中的索引计算元素的位置：

<div ng-repeat="c in countries | orderBy:q" ng-style="{ 'top': $index * 20 + 'px' }">

要更新

位置

属性，请执行以下操作：

创建基础数据的副本

您可以使用

angular.copy

复制整个阵列，但对于大型阵列，这对性能没有好处。这也是不必要的，因为复制的数组中的每个对象只需要一个唯一的属性和排序依据的属性：

var tempArray = countries.map(function(country) {
  var obj = {
    id: country.id
  };
  obj[property] = country[property];
  return obj;
});

在上面的示例中，

id

是唯一属性，

property

是一个包含要排序的属性名称的变量，例如

name

对副本进行排序

要对数组进行排序，请使用带有比较函数的

array.prototype.sort（）

：

tempArray.sort(function(a, b) {
  if (a[property] > b[property])
    return 1;
  if (a[property] < b[property])
    return -1;
  return 0;
});

tempArray.sort（函数（a，b）{
如果（a[属性]>b[属性]）
返回1；
if（a[属性]

将位置设置为排序副本中元素的索引

countries.forEach(function(country) {
  country.position = getNewPosition(country.id);
});

function getNewPosition(countryId) {
  for (var i = 0, length = tempArray.length; i < length; i++) {
    if (tempArray[i].id === countryId) return i;
  }
}

countries.forEach（功能（国家）{
country.position=getNewPosition（country.id）；
});
函数getNewPosition（countryId）{
for（变量i=0，长度=tempArray.length；i

还有改进的余地，但这是最基本的

演示：

---

我实现了一个使用交错的版本，但它看起来有点奇怪，因为元素会瞬间相互重叠。

这是使用Angular 1.1？有关于1.2的例子吗？感谢您至少需要使用AngularJS 1.1.5。我还没看过1.2。你在寻找什么？我想看看1.2是如何做到这一点的。在ng-move和ng-style方面存在问题。感谢您的努力，这是一个极好的答案！有一次，我尝试预先计算数组对象上的属性，但我没有保持实际顺序不变，这似乎是避免DOM操作的关键。

var tempArray = countries.map(function(country) {
  var obj = {
    id: country.id
  };
  obj[property] = country[property];
  return obj;
});

tempArray.sort(function(a, b) {
  if (a[property] > b[property])
    return 1;
  if (a[property] < b[property])
    return -1;
  return 0;
});

countries.forEach(function(country) {
  country.position = getNewPosition(country.id);
});

function getNewPosition(countryId) {
  for (var i = 0, length = tempArray.length; i < length; i++) {
    if (tempArray[i].id === countryId) return i;
  }
}