ng-repeat 필터링시 angularjs 애니메이션 중지

Question

"Notes"목록을 notes이라는 범위 배열에로드 할 때 각도 웹 응용 프로그램이 있습니다.

이 목록은 ng-repeat과 같이 내에서 여과 :

<div class="noteClass" ng-repeat="n in notes | propertyFilter: 'Fields.noteTabNumber' : selectedTab"> 

모두가 잘 작동이, 그리고 새로운 항목이 notes 배열에 추가 될 때 그래서 내 CSS 파일에 일부 CSS 애니메이션을 추가 한, 그것은 장면으로 움직입니다. 당신이 볼 수있는

div.noteClass.ng-enter, 
div.noteClass.ng-leave, 
div.noteClass.ng-move { 
    //my animations here 
} 

div.noteClass.ng-enter, 
div.noteClass.ng-move 
{ 
    //my further animation functions 
} 

div.noteClass.ng-enter.ng-enter-active, 
div.noteClass.ng-move.ng-move-active { 
    /// finished animations 
} 

내 문제는 목록은 사용자가 선택한하는 '탭'을 기반으로 메모를 필터입니다 propertyFitler라는 사용자 정의 필터로 여과, 필터와 함께입니다. 간단한 UL입니다

:

<ul> 
    <li ng-class="{selected: selectedTab==1}">...</li> 
    <li ng-class="{selected: selectedTab==2}">...</li> 
    <li ng-class="{selected: selectedTab==3}">...</li> 
</ul> 

때 사용자는 단순히 즉시 목록을 필터링보다는 다른 탭, 항목 화재에 대한 애니메이션, 을 클릭 이제까지.

새 항목을 목록에 적용하려면 어떻게해야하나요? 사용자가 LI 항목을 통해 목록을 필터링하면 목록의 변경 사항이 적용되지 않습니까?

Answer 1

$animate 서비스를 컨트롤러에 삽입 한 다음 탭을 클릭 할 때 사용하는 콜백이 무엇이든간에 먼저 $animate.enabled(false)을 호출해야합니다. 이렇게하면 애니메이션이 비활성화됩니다. 페이지가 새로 고쳐지면 $animate.enabled(true)으로 전화하십시오. 애니메이션을 다시 사용할 수있는 시점을 알면 까다로운 부분 일 수 있습니다. 가장 쉬운 방법은 $timeout을 사용하여 0.5 초 정도 애니메이션을 비활성화하는 것입니다. 당신이 그것을 좋아하지 않는다면, ngRepeat이 작업을 완료했을 때 작업에 대한 블로그 게시물이 있습니다. 아니면 내가 고려하지 않은 정말로 분명한 깨끗한 해결책이있을 것입니다.