使用 angularjs 列出重新排序动画

Posted 2023-03-06

【中文标题】使用 angularjs 列出重新排序动画

【英文标题】：List reorder animation with angularjs

【发布时间】：2013-09-02 15:06:56

【问题描述】：

我正在使用 angularjs 开发一个项目，该项目有一个实时更新的对象列表，并且每次更新都会重新排序。我想让这些对象从它们的开始位置平滑地移动到它们的结束位置，例如，当列表重新排序是：

A         C
B   ->    A
C         B

A 和 B 将分别下降一个位置，C 将上升两个位置，速度是原来的两倍。当您手动操作 DOM 时，这很容易完成 - 如果您通过更改其 style.top 来移动列表元素，您只需放置

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

进入元素的CSS，它会自动发生。但是，如果您使用 ngRepeat 显示列表，则此技巧将不起作用，因为（据我所知）角度实际上重新创建了组成列表的 DOM 元素以进行更新，而不是移动 DOM 元素。

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

有没有办法在 Angular 中实现如上所述的平滑重新排序动画，而无需放弃框架并自己处理 DOM 操作？

【问题讨论】：

看看这个question。此外，您始终可以编写自定义指令来执行您可能需要的任何 DOM 操作。

谢谢，太好了！我有点尴尬，我搜索时找不到那个问题... :-)

为什么不直接使用类和转换呢？只需将订单类附加到元素，随着类的更改/更新，它们将转换到适当的位置。

查看ng-repeat 的track by 子句。我认为只要每个列表项都有一个唯一的属性来跟踪，它就不会重写 DOM，除非在需要时。

【参考方案1】：

我认为这就是您要寻找的： http://www.nganimate.org/angularjs/ng-repeat/move

【讨论】：

这并没有显示如何为项目的重新排序设置动画；它只显示添加和删除项目。

【参考方案2】：

我想我已经完成了您在此处寻找的内容： http://codepen.io/daleyjem/pen/xbZYpY

通过使用track by，我可以防止 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>