使用 angularjs 列出重新排序动画 [英] List reorder animation with angularjs

问题描述

我正在 angularjs 中开发一个项目，该项目包含一个实时更新的对象列表，每次更新时都会重新排序.我想动画这些对象从它们的开始位置平滑地移动到它们的结束位置，例如当列表重新排序是:

A CB->一种CB

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

transition-duration: 0.5s, 0.5s;过渡属性:顶部；

到元素的 CSS 中，它会自动发生.但是，如果您使用 ngRepeat 来显示您的列表，这个技巧将不起作用，因为(据我所知)angular 实际上重新创建了组成列表的 DOM 元素以进行更新，而不是四处移动 DOM 元素.

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

是否有一种方法可以在 angular 中实现如上所述的平滑重新排序动画，而无需放弃框架并自己处理 DOM 操作?

解决方案

我想我已经完成了你在这里寻找的东西:http://codepen.io/daleyjem/pen/xbZYpY

通过使用 track by，我可以防止 DOM 元素被重新创建，然后可以操纵它们的位置.

{{ item.id }}: {{ item.last_name }}, {{ item.first_name }}

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 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;

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.

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.

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?

解决方案

I think I've accomplished what you're looking for here: http://codepen.io/daleyjem/pen/xbZYpY

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屋！