AngularJS - 한 방향으로 만 애니메이트합니까?

배열에 5 개의 항목이 있습니다. 내가 그들을 재편성 할 때 더 높은 인덱스로 끝나는 아이템에 대해서만 애니메이션을 볼 수 있습니다. 다른 하나는 새로운 지점으로 점프합니다.AngularJS - 한 방향으로 만 애니메이트합니까?

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

2014-12-16 dani

그리고 CSS 규칙? – PSL

이 (가) CSS를 추가했습니다. 감사. – dani

plunkr을 함께 넣을 수 있습니까? 항목을 추가하는 방법을 알아야 할 필요가 있습니다. Angular는 배열의 앞부분에 이것을 넣으면 전체 목록을 다시 작성하지만 끝 부분에 넣으면 전체 목록을 다시 작성합니다. – Darren

더 낮은 색인으로 끝나는 요소는 DOM에서 제거되어 새로운 위치에 삽입됩니다. 요소가 DOM에 추가되면 CSS 전환은 애니메이션되지 않습니다 (적어도 주요 브라우저에는 포함되지 않음).

나머지 요소는 DOM에 남아 있고 새로운 top 값을 가져오고 해당 전환이 애니메이션으로 표시됩니다.

다음은 ngAnimate 및 ng-move을 사용하여 움직이는 요소를 빨간색으로 색칠하는 데모입니다 (다시 삽입 한 DOM에서 제거 된 요소). 위에서 설명한 것처럼 이들은 top 전환 애니메이션을 가져 오지 않는 요소입니다.

하나 개의 솔루션이 here을 찾을 수 있습니다.

2014-12-23 14:24:48 tasseKATT

답변