Анимация переупорядочения списка с помощью angularjs

Я работаю над проектом в 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 вы можете настроить angular автоматически устанавливать класс css для вашего элемента при его перемещении, например, для имитации его постепенного появления или исчезновения. Но у вас нет информации о том, где раньше находился элемент, поэтому вы не можете плавно переместить его из старого положения - он просто телепортируется в новое место, и вы должны заставить его танцевать там. Насколько я могу судить, это также верно для анимации javascript - angular телепортирует ее на место, а затем передает ее вашей функции без какой-либо информации об истории.

Есть ли способ в angular иметь плавную анимацию переупорядочения, как описано выше, без отказа от фреймворка и самостоятельной обработки манипуляций с DOM?


javascript animation css angularjs ng-animate
person Patrick Thill    schedule 30.08.2013    source источник
comment
Взгляните на этот вопрос. Кроме того, вы всегда можете написать специальную директиву для выполнения любых необходимых вам манипуляций с DOM.   -  person Michael Benford    schedule 30.08.2013
comment
Спасибо, отлично! Я немного смущен, что не смог найти этот вопрос, когда искал ... :-)   -  person Patrick Thill    schedule 30.08.2013
comment
Почему бы просто не использовать классы и переходы? Просто добавьте класс порядка к элементам, и по мере изменения / обновления класса они переместятся в соответствующую позицию.   -  person monners    schedule 30.12.2013
comment
изучите пункт track by в ng-repeat. Я думаю, что пока у вас есть уникальное свойство для каждого элемента списка, по которому можно отслеживать, он не будет переписывать DOM, за исключением тех случаев, когда это необходимо.   -  person daleyjem    schedule 05.12.2014

Ответы (2)


arrow_upward
7
arrow_downward

Думаю, я выполнил то, что вы здесь искали: 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>
person daleyjem    schedule 08.12.2014

arrow_upward
-1
arrow_downward

Думаю, это то, что вы ищете: http://www.nganimate.org/angularjs/ng-repeat/move

person eyalap    schedule 15.02.2014
comment
Это не показывает, как анимировать изменение порядка элементов; он показывает только добавление и удаление элементов. - person Matthias; 10.11.2014