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