用于平滑排序ng-repeat的ngAnimate示例？

Question

我想看一个使用角度动画（1.2x）对列表进行排序的功能示例。（我只在互连网上碰到过破烂的小提琴等）：

给定数组[A，B，C]和随后的[C，B，A]的ng-repeat应该：

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

（使用CSS绝对顶部位置或类似位置。）

使用交错（过渡延迟）的示例是一个加分项。

Answer 1

问题

实现您想要的内容可能会有些棘手。

一种常见的尝试是ng-style根据列表中的元素索引来计算元素的位置：

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

演示： http ：
//plnkr.co/edit/anv4fIrMxVDWuov6K3sw？p =
preview

问题在于，只有某些元素是动画的，并且仅朝着底部。

这是为什么？

考虑以下按名称排序的列表（类似于上面演示中的列表）：

• 2-丹麦
• 3-挪威
• 1-瑞典

当您按ID对列表进行排序时，只会移动一个元素-
瑞典从下到上。实际上发生的是，将瑞典元素从DOM中删除，并在其新位置再次插入。但是，当将元素插入DOM时，通常不会发生关联的CSS转换（我之所以说是正常的，因为它最终取决于相关浏览器的实现方式）。

其他两个元素保留在DOM中，获得新top位置，并且它们的过渡具有动画效果。

因此，采用这种策略时，只会为未在DOM中实际移动的元素设置过渡动画。

另一种策略是包括ngAnimate模块并使用该CSS类ng-move。动画ng-repeats的几乎所有示例都使用此功能。

但是，由于两个原因，这将无法正常工作：

1. 的ng-move类只被施加到元素移动（因此仅在上面的例子中的瑞典元件）

2. 在ng-move将元素插入到DOM中的新位置后，该类将应用于该元素。您可以使用CSS表示“从不透明度0到1进行动画处理”，但是您不能使用“从旧位置到新位置进行动画处理”，因为不知道旧位置并且每个元素都必须移动不同的距离。

一个办法

我过去使用的一种解决方案是ng- repeat用于呈现列表，但从不实际使用基础数据。这样，所有DOM元素都将保留在DOM中并可以进行动画处理。要正确渲染元素，请使用ng- style和自定义属性，例如：

ng-style="{ 'top': country.position * 20 + 'px' }"

要更新position属性，请执行以下操作：

1. 创建基础数据的副本

您可以angular.copy用来复制整个阵列，但是对于大型阵列，这对性能不利。这也是不必要的，因为复制数组中的每个对象仅需要一个唯一的属性，并且该属性可以按以下顺序排序：

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

在上面的示例id中，Unique属性是唯一的，并且property是一个html" target="_blank">变量，其中包含要排序的属性的名称，例如name。

1. 排序副本

要使用Array.prototype.sort()比较功能对数组进行排序：

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

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

    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;
  }
}

```

有改进的余地，但这是基础。

演示： http :
//plnkr.co/edit/2Ramkg3sMW9pds9ZF1oc?p=preview

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