18

我正在 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 指令，您可以在元素移动时自动在元素上设置一个 css 类，例如模拟它淡入或淡出。但是你没有关于元素曾经在哪里的信息，所以你不能从它的旧位置平滑地移动它——它只是被传送到新的位置，你必须让它在那里跳舞。据我所知，javascript 动画也是如此 - 角度将其传送到位，然后将其传递给您的函数，而无需任何历史信息。

有没有一种方法可以在不放弃框架并自己处理 DOM 操作的情况下实现上述平滑的重新排序动画？

4

2 回答 2

7

我想我已经完成了你在这里寻找的东西：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>
于 2014-12-08T17:14:00.813 回答
-1

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

于 2014-02-15T08:44:55.070 回答