AngularJS $ animate.addClass에 $ timeout이 필요합니다.

Question

$ animate 서비스의 addClass 메서드가 적절한 -add 및 -add-active 클래스를 추가하지 않는 경우 예기치 않은 동작이 발생합니다. http://plnkr.co/edit/3sFGp4y2WGA0HReIglR3?p=preview

은 물론, 불필요한 $ 시간 제한을 사용하면 내가 피할하고 싶은 무언가이다 :

달러 (A $) 시간 제한에 싸여 서비스의 같은 사용은 예상대로 작동하는 것 같다.

서비스가 누락되었거나 서비스를 잘못 사용하고 있습니까?

Answer 1

이것이 올바른 대답의 야심적인 구실이 아닐 수 있습니다. 왜냐하면 나는 결코 ngAnimate을 개인적으로 사용하지 않았기 때문에 (나는 한 번에 프레젠테이션을 보았습니다). 그러나, 나는 그것이 당신이 이미지를로드하기를 기다리지 않았다는 사실에 기인한다고 생각한다. 이것은이 지시어의 목적 인 것 같다. $timeout은 정확한 DOM 요소에서 애니메이션을 유도하기 위해이 예제에서 충분한 시간을 줄지 만 항상 올바른 것은 아닙니다. 나는 당신이 .addClass 기능을 사용하는 이미지의 '로드'이벤트를 기다려야한다고 생각합니다.이 경우 실제로 원래 게시 한 코드의 양과 다소 차이가 나는 것으로 나타납니다. 이런 일이 발생하는 이유는 확실하지 않다

element.on('load', function() { 
    scope.$apply(function() { 
    $animate.addClass(element, 'preloaded', function() { 
     console.log('Animation finished!'); 
    }); 
    }) 
}); 

Answer 2

,하지만 난 각도 소화해야하는 것으로 나타났습니다 : 문제는이 방법은 DOM 요소가 있는지 확인하며, 이미지가 완전히 페이지에로드 된 것입니다 어떻게 든 애니메이션을 시작하기 전에, 일반적으로 $ timeout. ngClass 또는 ngRepeat와 같은 애니메이션을 자동으로 시작해야하는 지시문조차도 이벤트에 의해 트리거되지 않으면 시간 초과가 필요합니다.

그래서이 시간 제한없이 작동합니다 ngClass 및 ngClick
를 사용하여 쿵하는 소리 업데이트

return function (scope, element, attr) { 
    scope.addPreloadClick = function() { 
    $animate.addClass(element, 'preloaded'); 
    }; 
    scope.removePreloadClick = function() { 
    $animate.removeClass(element, 'preloaded'); 
    }; 
}; 

이 http://plnkr.co/edit/qLFgCc0XDGJT4e7ampUW?p=preview