Angular JS : 지시어에 의해 제공되는 애니메이션을 일시적으로 비활성화하므로 페이지가로드 될 때 애니메이션이 적용되지 않습니까?

Question

제목으로,이 바이올린을 참조하십시오

내가 다음 코드를 사용하여 지시문을 추가 한

http://jsfiddle.net/goodwill/ezNuj/

:

myApp.directive('ngFadeIn', function() { 
    return function(scope, element, attr) { 
    if (element.is('tr, tbody')) { 
     element.find('td').effect("highlight", {}, 500); 
    } else { 
     element.effect("highlight", {}, 500); 
    } 
    return scope.destroy = function(complete) { 
     return element.fadeOut(500, function() { 
     if (complete) { 
      return complete.apply(scope); 
     } 
     }); 
    }; 
    }; 
}); 

페이지가 처음로드 될 때 내가 가진 문제이며, I 때문에 ng-repeat 요소에 지시문을 적용하면 페이지를 처음로드 할 때 모든 항목이 강조 표시됩니다 (한 번 깜박임). 너무 많은 해킹없이 이상하게도 건너 뛸 수 있습니까? (이상적으로는 지시문 안에있는 모든 것이 이상적입니다)

Answer 1

흥미롭고, 나는 이것에 대해 간단하고 깨끗한 해결책이 있는지 확신하지 못합니다. ngRepeatDirective는 리피터가 처음으로 실행되고 있는지 또는 목록에 새 항목을 추가하고 있는지 신경 쓰지 않는 것처럼 보입니다. 그리고 그 때문에 그것은 당신이 그것에 따라 다른 행동을 취하게하지 않습니다. AngularUI의 ui-animate 지시어는이 문제를 해결하지 못하는 것으로 보입니다. 그래서 성가신 제한 시간을 사용하지 않고도 이것이 가능할 지 확신 할 수 없습니다.

당신이 할 수있는 일은 ngRepeatDirective를 수정하여 ng-repeat-finished 속성과 같은 것을 확인하고 리피터가 끝난 후에 실행하는 것입니다. 그렇다면 첫 번째 중계기에서 애니메이션을 피하기 위해 로직을 추가하는 것이 중요합니다.

그런데 Angular가 내부적으로 사용하는 것이므로 ng 접두어로 지정하지 않아야합니다. 신청서에 접두어를 붙이십시오.

Answer 2

페이지 렌더링이 처음 완료된 시점을 결정할 수 있다면 지시어가 삽입 할 수있는 서비스 또는 rootScope에 대한 일부 속성을 설정할 수 있으므로이 속성을 검사하여 해당 항목을 적용할지 여부를 결정할 수 있습니다. 생기.

불행히도 페이지 렌더링이 완료된 시점을 확인할 방법이없는 것처럼 보입니다. 같은 문제를 해결하는 AngularJS - How to query the DOM when directive rendering is complete을 참조하십시오.

제가 생각할 수있는 유일한 해결책은 $ timeout을 사용하여 1 초 정도 지연시키는 다른 지시어를 작성한 다음 (위에서 한 번 사용하십시오) 위에서 언급 한 것을 수행하는 것입니다. 서비스에 대한 일부 속성 설정 또는 rootScope. 귀하의 fadeIn 지시문은 해당 속성/변수를 보며 $ 값이 변경되면 애니메이션을 허용하거나 금지하는 일부 로컬 속성/부울/플래그를 설정할 수 있습니다.

Answer 3

version 1.1.14에 방금 발표 된 각도의 내장 애니메이션을 확인합니다. 다음은 새로운 기능에 대한 훌륭한 글입니다 : Animation in AngularJS. 특히 "조건부로 애니메이션을 활성화/비활성화"섹션을 확인합니다.

JS : 자신의 사이트에서

//turn on the animation 
$scope.myAnimation = { enter: 'cool-enter', leave: 'cool-leave' }; 

//change the animation 
$scope.myAnimation = { enter: 'uncool-enter', leave: 'uncool-leave' }; 

//remove the animation 
$scope.myAnimation = null; 

HTML :

다시

<div data-some-directive data-ng-animate="myAnimation"></div> 

주의, 이것은 저도 같은 문제가 각도 JS

Answer 4

1.1.14의 현재 불안정한 버전이 필요합니다 각도 1.4.9를 사용. ng-repeat 애니메이션이 처음으로 발생하는 것을 원하지 않습니다.

(function(){ 
    'use strict'; 

    angular 
    .module('directives') 
    .directive('disableLoadingAnimation', disableLoadingAnimation); 

    function disableLoadingAnimation($animate, $timeout) { 
    var directive = { 
     link: link, 
     restrict: 'A' 
    }; 
    return directive; 

    function link(scope, element) { 
     $animate.enabled(element, false); 
     $timeout(function(){ 
     $animate.enabled(element, true); 
     }, 1000); 
    } 
    } 
})(); 

HTML

<table disable-loading-animation> 
    <tr ng-repeat="line in lines">...</tr> 
</table> 

내가 싫어 : 내가 그 일을 발견하는 유일한 방법은 NG 반복 부모에 정의 지시어를 가지고 짧은 시간 동안 애니메이션을 비활성화하는 것입니다 사실 내가 1000ms 지연을 설정해야하지만 그것은 지금까지 발견 된 더 깨끗한 방법입니다.