列表重新排序动画与angularjs [英] List reorder animation with angularjs
问题描述
我工作在angularjs项目有哪些物体实时更新的列表，并会在每次更新重新排序。我想动画这些对象从他们的出发顺利移动到其最终位置，因此例如当列表重排序是：
I'm working on a project in angularjs that has a list of objects which update in real time and will be reordered with each update. I want to animate these objects moving smoothly from their starting to their end positions, so for example when the list reorder is:
A C
B -> A
C B
A和B将分别向下移动一个地方，和C将向上移动两个景点的两倍快。这是当你手动操纵DOM容易做到 - 如果你是通过改变它的style.top，你只要把移动列表元素
A and B will each move down one spot, and C will move up two spots, twice as quickly. This is easily done when you are manipulating the DOM manually - if you are moving the list element by changing it's style.top, you just put
transition-duration: 0.5s, 0.5s;
transition-property: top;
到CSS的元素，并将其自动发生。但是，如果您使用的是ngRepeat显示您的列表，因为（据我可以告诉）角实际上再现了DOM元素组成的列表，以做一个更新，而不是四处移动DOM元素这一招是行不通的。
into the CSS for the element and it happens automatically. However, this trick won't work if you are using ngRepeat to display your list, because (as far as I can tell) angular actually recreates the DOM elements making up the list to do an update, rather than moving the DOM elements around.
不幸的是，我发现它真的很难有角的动画重现此功能。我快到的问题是，此举角的动画似乎并不知道每个元素的起始位置。随着ngAnimate指令，你可以有角自动设置一个CSS类的元素上移动时，进行模拟或缩小，例如褪色。但是你在哪里元素以前是没有资料，所以从它的老位置，你不能顺畅地移动它 - 它只是获取被传送到新的地方，你必须让它跳舞那里。据我所知，这也是如此的JavaScript动画 - 角传送点到位，然后把它传递给你的函数，没有任何历史信息。
Unfortunately, I've found it really difficult to reproduce this functionality with angular animations. The problem that I'm running into is that angular move animations seem to be unaware of each element's starting position. With the ngAnimate directive you can have angular automatically set a css class on your element when it moves, to simulate it fading in or out for example. But you have no information on where the element used to be, so you can't move it smoothly from it's old position - it just gets teleported to the new spot, and you have to make it dance around there. As far as I can tell, this is also true for javascript animations - angular teleports it into place and then passes it to your function, without any history information.
有内的角度的方式具有光滑重排序的动画，如上所述，无需开沟的框架和自行处理DOM操作
Is there a way within angular to have a smooth reordering animation as described above, without ditching the framework and handling the DOM manipulation yourself?
推荐答案
我想我已经完成了你在找什么在这里：
HTTP：//$c$cpen.io/daleyjem/pen/xbZYpY
I think I've accomplished what you're looking for here: http://codepen.io/daleyjem/pen/xbZYpY
通过使用轨道由，我能够保持被重新创建DOM元素，然后可以操纵自己的位置。
By using track by, I'm able to keep the DOM elements from being recreated, and can then manipulate their position.
<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>
这篇关于列表重新排序动画与angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
