为顺利排序的NG-重复ngAnimate的例子吗？ [英] Example of ngAnimate for smoothly sorting an ng-repeat?

问题描述

我想看到使用角动画（1.2倍）来排序列表的功能例。 （我只遇到过破小提琴等因素对interwebs）：

I would like to see a functional example of using angular-animate (1.2x) to sort a list. (I have only come across broken fiddles etc on the interwebs):

给数组中的NG-重复[A，B，C]后来[C，B，A]应该：

An ng-repeat given an array [A,B,C] and later [C, B, A] should:

• 将一个底部


• 将C到顶部


• 保留B的位置

（使用CSS绝对定位的定位或类似）。

(Using CSS absolute top positioning or similar.)

用惊人的（过渡延迟）的一个例子是一个奖金。

An example using staggering (transition-delay) is a bonus.

推荐答案

实现你想要可以是一个有点棘手的。

The problem

Achieving what you want can be a bit tricky.

一个常见的​​尝试是使用 NG-风格基于其在列表中的索引来计算element's位置：

A common attempt is to use ng-style to calculate the element´s position based on its index in the list:

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

演示： http://plnkr.co/编辑/ anv4fIrMxVDWuov6K3sw？p = preVIEW

的问题是，只有一些元素的动画，并且仅向底部

The problem is that only some elements are animated, and only towards the bottom.

这是为什么？

考虑以名称（类似于来自上述演示的）排序以下列表：

Consider the following list sorted by name (similar to the one from the demo above):

• 2 - 丹麦


• 3 - 挪威


• 1 - 瑞典

当您对此列表进行排序通过ID而不是只有一个元素将移动 - 瑞典从底部到顶部。实际发生的是，瑞典元素是从DOM中删除，并在其新的位置再次插入。然而，当一个元件被插入到DOM相关的CSS transtions通常不会发生（我说通常，因为它最终取决于如何有关的浏览器实现）。

When you sort this list by id instead only one element will move - Sweden from bottom to top. What actually happens is that the Sweden element is removed from the DOM and inserted again at its new position. However, when an element is inserted into the DOM the associated CSS transtions will normally not occur (I say normally as it ultimately depends on how the browser in question is implemented).

另外两个元素留在DOM，获得新的顶位置和过渡的动画。

The other two elements remain in the DOM, get new top positions and their transitions are animated.

所以用这个策略的转换只为动画未竟在DOM移动元素。

So with this strategy the transitions are only animated for the elements that didn't actually move in the DOM.

另一种策略是包括ngAnimate模块，并使用CSS类 NG-移动。几乎动画NG-重复的所有示例使用。

Another strategy is to include the ngAnimate module and use that CSS class ng-move. Almost all examples of animated ng-repeats use this.

不过，这不会工作，因为两个原因：

However, this will not work because of two reasons:

1. 的纳克-移动类将仅被应用到移动（因此只对瑞典元件在上面的例子）中的元素

1. The ng-move class would only be applied to the elements that move (so only to the Sweden element in the example above)

的 NG-举动已经插入到DOM中的新位置后类应用到元素。你可以有CSS，上面写着从不透明0动画1，但你不能有旧位置动画新，因为旧的位置是不知道，每个元件都有移动不同的距离。

The ng-move class is applied to the element after it has been inserted into its new position in the DOM. You can have CSS that says "animate from opacity 0 to 1", but you can't have "animate from old position to new" since the old position is not known and each element would have to move a different distance.

我用自己在过去的解决方案是使用 NG-重复渲染列表中，但实际上从未诉诸底层数据。这种方式，所有的DOM元素将留在DOM和可以是动画。要渲染的元素正确使用 NG-风格和一个自定义属性，例如：

A solution

A solution I've used myself in the past is to use ng-repeat to render the list but never actually resorting the underlying data. This way all the DOM elements will remain in the DOM and can be animated. To render the elements correctly use ng-style and a custom property, for example:

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

要更新位置属性做到以下几点：

To update the position property do the following:

1. 创建基础数据的副本

1. Create a copy of the underlying data

您可以使用 angular.copy 整个数组复制，但与大型阵列，这将不利于性能。这也将是不必要的，因为复制的阵列中的每个对象只需要一个属性，它是独一无二的，属性进行排序：

You could use angular.copy to copy the entire array, but with large arrays this wouldn't be good for performance. It would also be unnecessary since each object in the copied array would only need a property that is unique and the property to sort by:

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

在上面 ID 是唯一的属性的示例和属性是包含属性的名称的变量排序，例如名称。

In the example above id is the unique property and property is a variable containing the name of the property to sort by, for example name.

排序副本

要排序的阵列中使用 Array.prototype.sort（）与比较功能：

To sort the array use Array.prototype.sort() with a compare function:

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

设定位置为元素的索引在分类复制

Set position to the element's index in the sorted copy

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

有改进的余地，但是这是它的基本功能。

There is room for improvement, but that is the basics of it.

演示： http://plnkr.co/编辑/ 2Ramkg3sMW9pds9ZF1oc？p = preVIEW

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

I implemented a version that used staggering, but it looked a bit weird since elements would overlap each other momentarily.

这篇关于为顺利排序的NG-重复ngAnimate的例子吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！