angularjs와 함께 주문 애니메이션을 나열하십시오.

Question

저는 anglejs의 프로젝트에서 실시간으로 업데이트되고 각 업데이트와 함께 재정렬 될 객체 목록을 가지고 있습니다.

A   C 
B -> A 
C   B 

A와 B는 각각 한 자리 아래로 이동하며, C는 두 개의 지점을 이동합니다, 예를 들어 목록 재주문이 때, 그래서 나는, 최종 위치로 선발에서 원활하게 이동 이러한 개체를 애니메이션을 적용 할 두 배나 빨리. 이것은 쉽게 수동으로 DOM을 조작 할 때 이루어집니다 - 당신이 style.top의 변경하여 목록 요소를 이동하는 경우, 당신은 단지 요소의 CSS에

transition-duration: 0.5s, 0.5s; 
transition-property: top; 

를 넣어 자동으로 발생합니다. 그러나, ngRepeat를 사용하여 목록을 표시하는 경우이 트릭은 작동하지 않습니다. 왜냐하면 (내가 알 수있는 한 각도로) DOM 요소를 이동하여 업데이트하기 위해 목록을 구성하는 DOM 요소를 실제로 다시 만들기 때문입니다.

불행히도 각도 애니메이션을 사용하여이 기능을 재현하는 것이 어렵다는 것을 발견했습니다. 문제는 각 동작 애니메이션이 각 요소의 시작 위치를 인식하지 못하는 것입니다. ngAnimate 지시어를 사용하면 요소가 움직일 때 요소에 CSS 클래스를 자동으로 설정하고 예를 들어 페이드 인 또는 페이드 아웃을 시뮬레이션 할 수 있습니다. 그러나 엘리먼트가 어디에 있었는지에 대한 정보가 없기 때문에 기존 위치에서 부드럽게 움직일 수 없습니다. 단지 새로운 지점으로 순간 이동하고 거기서 춤추도록해야합니다. 내가 말할 수있는 한, 이것은 javascript 애니메이션에도 해당됩니다. 즉, 각도로 텔레포트 한 후 히스토리 정보없이 기능에 전달합니다.

프레임 워크를 버리고 DOM 조작을 직접 처리하지 않고 위와 같이 부드러운 재정렬 애니메이션을 사용하는 방법이 있습니까? 나는 유지할 수있어 http://codepen.io/daleyjem/pen/xbZYpY

track by를 사용하여 : 난 당신이 여기에서 무엇을 찾고 있는지 내가 성취했다고 생각 http://www.nganimate.org/angularjs/ng-repeat/move

Answer 1

나는 이것이 당신이 찾고있는 무엇을 생각 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> 

Answer 2

: