요소에 CSS 애니메이션이 있는지 확인하십시오.

Question

css3 애니메이션이 AnimationEnd을 jQuery에서 트리거 할 때 요소를 제거하는 스크립트가 있습니다. 문제는 이러한 애니메이션이 포함되지 않을 수있는 외부 CSS 파일에 바인딩된다는 것입니다.

바로 지금 이것을 부릅니다.

$element.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) { 
    $(this).remove(); 
}); 

그러나

브라우저가 나 애니메이션 파일이 아직도 요소를 제거 할 필요는 포함되지 않았습니다 지원하지 않은 하나 때문에 요소는 애니메이션이없는 경우. 이것이 호출되었는지 어떻게 확인할 수 있습니까?

나는 이것을 시도했지만 값을 true로 변경하지는 않습니다.

var hasAnimation = false; 
$element.one('webkitAnimationStart oanimationstart msAnimationStart animationstart', function(event) { 
     hasAnimation = true; 
}); 
if (!hasAnimation) { 
     $element.remove(); 
} 

Answer 1

당신하여 hasAnimation 애니메이션이 시작되기 전에, 당신이 당신의 '타임 슬라이스'를 포기하지 않았기 때문에 검사합니다. (그게 잘못된 용어지만, 'timeslice'는 무슨 일이 벌어지고 있는지 설명합니다.)

AFAIK 아니오 자바 스크립트 implementaion은 - 적어도 스크립트 수준이 아닌 멀티 스레드입니다. 그래서 당신이 반복한다면, 당신은 반복 할 것이고 아무 일도 일어나지 않습니다.

대기열에 기능을 넣는 것과 같은 이벤트를 상상해보십시오.이 이벤트는 차례대로 실행됩니다. 잘 행동했다. 그래서 당신이 그런 사건의 결과가 무엇인지 알고 싶다면, 현재 함수를 끝내야합니다 (타임 슬라이스를 포기한다고 부름). 이제 이벤트가 시작되고 지금은 유일한 이벤트입니다.

당신은 대기열 그래서 경우를 A setTimeout(0)와 cleanup_if_no_animation(hasAnimation) 당신 그나마 정말 한 번 주변에 놀이 setTimeout 자체 triggert되지 않은 StartAnimation로, 당신은 그냥 포기하고 (옵션 시작 이벤트) 후 다시 시작

당신이 가지고있는 것과 같은 상황입니다. 만약 당신이 1000이라고 가정하고 이것을 DIV에 넣고 싶다면. 단계 사이에 setTimeout (0)을 사용하여 디스플레이를 업데이트해야합니다.

이 example

function bad_loop() { 
    for (i = 1; i < 100; ++i) { 
     $('#out').text(i) 
    } } 

function good_loop(i = 1) { 
    $('#out').text(i) 
    if (i<50) setTimeout(good_loop,0,i+1) }