Javascript 列表使用angularjs对动画进行重新排序

我正在angularjs的一个项目中工作，该项目有一个实时更新的对象列表，每次更新都会重新排序。我希望设置这些对象从起始位置到结束位置平滑移动的动画，例如，当列表重新排序为：

A         C
B   ->    A
C         B

A和B将分别向下移动一个点，C将向上移动两个点，速度是前者的两倍。这在手动操作DOM时很容易做到——如果通过更改列表元素的style.top来移动列表元素，只需将

transition-duration: 0.5s, 0.5s;
transition-property: top;

将其导入元素的CSS中，并自动执行。但是，如果使用ngRepeat显示列表，这个技巧将不起作用，因为（据我所知）angular实际上会重新创建组成列表的DOM元素以进行更新，而不是移动DOM元素

不幸的是，我发现很难用角度动画重现这种功能。我遇到的问题是，角度移动动画似乎不知道每个元素的起始位置。使用ngAnimate指令，您可以让angular在元素移动时自动在元素上设置一个css类，例如模拟元素淡入淡出。但是你没有关于元素过去在哪里的信息，所以你不能顺利地将它从原来的位置移开——它只是被传送到新的位置，你必须让它在那里跳舞。据我所知，javascript动画也是如此——angular将其传送到适当的位置，然后将其传递给函数，而不需要任何历史信息

---

angular中有没有一种方法可以像上面描述的那样平滑地重新排序动画，而不必放弃框架并自己处理DOM操作？

我认为这就是您想要的：

---

我想我已经完成了您在这里寻找的目标：

通过使用

trackby

，我可以防止DOM元素被重新创建，然后可以操纵它们的位置

<div ng-repeat="item in items | orderBy:sorter track by item.id" class="item" jd-script>
    {{ item.id }}: {{ item.last_name }}, {{ item.first_name }}
</div>

{{item.id}：{{item.last_name}，{{item.first_name}

看看这个。另外，您可以随时编写自定义指令来执行任何可能需要的DOM操作。谢谢，这太完美了！我有点不好意思，我在搜索时找不到那个问题…：-）为什么不使用类和转换呢？只需将order类附加到元素，当类更改/更新时，它们将转换到适当的位置。查看

ng repeat

的

track by

子句。我认为，只要每个列表项都有一个唯一的属性来跟踪，它就不会重写DOM，除非需要它；它仅显示添加和删除项目。