使用angularjs列出重新排序动画

Question

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

在角度内是否有一种方法可以获得如上所述的平滑重新排序动画,而不必放弃框架并自己处理DOM操作？

Answer 1

我想我已经完成了你在这里寻找的东西: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>

Answer 2

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