AngularJS - только анимация в одном направлении?

Question

У меня есть 5 элементов в массиве. Когда я перетаскиваю их, я вижу анимацию только для предметов, которые имеют более высокий индекс, а другой просто прыгают в новое место.

<div ng-repeat="item in items track by item.value" class="TestItem" ng-style="{'top' : $index * 20 + 'px'}"> 
     {{item.name}} 
    </div> 

CSS

.TestItem{ 
    transition: all linear 2s; 
    position: absolute; 
} 

Как я могу сделать все элементы анимации в своей новой верхней позиции ??

Answer 1

Элементы, которые заканчиваются нижним индексом, будут удалены из DOM и вставлены в их новые положения. Когда элементы добавляются в DOM, их переходы CSS не анимируются (по крайней мере, ни в одном из основных браузеров).

Остальные элементы останутся в DOM, получите новые значения top, и их переходы будут анимированы.

Ниже приведена демонстрация с использованием ngAnimate и ng-move для окраски движущихся элементов красного цвета (те, которые были удалены из вставленных DOM-аксессуаров). Как описано выше, это элементы, которые не получают анимированный переход top.

Демо:http://plnkr.co/edit/7QFMSgo60vQ2qfYzqsBI?p=preview

Одним из путей решения этой проблемы можно найти here.