AngularJS에서 여러 오브젝트를 동시에 애니메이트하면 고르지 못한 애니메이션이 발생합니다.

Question

이미지를 페이드 아웃하는 슬라이드 쇼를 만들려고 할 때이 문제가 발생했습니다. 애니메이션을 한 번에 하나씩 수행 할 때 매끄럽고 매끄 럽습니다. 그러나 여러 애니메이션을 수행 할 때 고르지 않고 불규칙 해집니다.

이 작동

var fadeToNextImg = function() { 
    var nextImg = imageHandler.getNextImage(); 
    $animate.addClass(curImage, 'ng-hide'); 
    $animate.removeClass(nextImg, 'ng-hide'); 
    curImage = nextImg; 
}; 

는 그러나 애니메이션이 엉뚱한 결과를 얻게 동시에, (모두가 지시어에 발생)가 중복 이미지를 페이드 아웃하면서 여기에, 나는 하나 개의 이미지를 페이딩 사용하고 코드입니다. 이미지가 부드럽게 페이드 인 및 페이드 아웃되지 않고 대신 나타나거나 때로는 이미지 중 하나가 희미 해집니다. 그러나 경우 애니메이션은 한 번에 하나만 발생하도록 다음 두 애니메이션이 완벽하게 excecute I 둥지, 그래서 같은 다른 하나씩 오른쪽 : 위대한

var fadeToNextImg = function() { 
    var nextImg = imageHandler.getNextImage(); 
    $animate.addClass(curImage, 'ng-hide', function() { 
     $animate.removeClass(nextImg, 'ng-hide'); 
     curImage = nextImg; 
    }); 
}; 

.. 내가 원하는 그냥 원하는 효과는. 하나의 이미지가 희미 해지면서 다른 이미지가 원활하게 사라지 길 원합니다! 내가 뭔가 잘못하고 있는거야? 아니면 Angular Animate 라이브러리의 버그/성능 문제입니까?

알고 있어야 할 또 다른 사실은 지시어 외부에서 JQuery DOM 조작을 사용하여이 작업을 시도한 결과 애니메이션이 완벽했기 때문입니다. 나는 그것을 지시어로 옮겼습니다. 왜냐하면 이것이 일을하는 각기 다른 방식이기 때문입니다. 그렇다면 내 애니메이션을 왜 잭에 넣을 까?

Answer 1

이전에 $animate을 사용하지 않은 경우 가장 큰 문제는 $animate.addClass(...)이 완료되면 '약속'을 반환한다는 것입니다. 즉, 이후의 각 애니메이션은 이전 약속의 콜백이 완료된 후에 만 ​​활성화되어야합니다 (이미지가 마지막으로로드되었음을 의미).

다른 방법으로 말하자면, 여러분의 $animate.addClass(..)이 즉시/연속적으로 실행되고 이전의 것이 choppiness를 완료 할 때까지 기다리지 마십시오. 또한, 당신이 그것을 가지고, 난 믿을 수가 없어 ng-hide 작동합니다. 한 이미지의 최종 CSS 상태가 '흐려지며'다음 이미지의 시작 CSS 상태가 '페이드'된 것 같습니다. 이 경우 다양한 from 및 toss 상태를 처리하려면 options 객체를 addClass(...)에 전달해야 할 수 있습니다. $animate의 약속 콜백에 then를 사용하는 방법에 대한 몇 가지 거친 의사 코드 :

var fadeToNextImg = function() { 

    var nextImg = imageHandler.getNextImage(); 
    var promise = $animate.addClass(curImage, 'endfade'); 

    promise.then(function(results){ 
    $animate.removeClass(...) 
    curImage = nextImg; 
    }); 

}