animationend가 재귀 함수에서 작동하지 않습니다.

Question

div에 추가 한 동적 HTML 요소를 가리키는 배열에 저장된 각 ID를 반복 할 때 사용할 함수가 있습니다. 그런 다음 CSS 클래스를 변경하고 animationend 이벤트 리스너를 추가하려고합니다. 애니메이션이 끝나기 전에 이벤트가 시작된다는 사실을 제외하고는 모두 작동합니다. 무슨 일이 일어나는지는 배열의 모든 요소가 한 번에 움직이는 것입니다. 각 요소를 연속적으로 애니메이션에 넣기를 원합니다. 나는 코드를 가지고 놀고 있었고 온라인으로 답을 찾았지만 막혔다. 어떤 아이디어?

자바 스크립트 코드 : webkitAnimationEnd, animationend, MSAnimationEnd, 예를 들면 : 모든

 function moveLines(count){ 
      if(count<=introLinesBlurEls.length){ 
       thisMoveLine = document.getElementById(introLinesBlurEls[count]); 
       thisMoveLine.className = 'introImgBlurAnimate'; 
       count++; 
       thisMoveLine.addEventListener('animationend', moveLines(count), false); 
      }else{ 
       alert('Hey. I am done.'); 
      } 
     } 

Answer 1

작업을 참조하십시오.

thisMoveLine.addEventListener('animationend', moveLines(count), false); 

이것은 moveLines()를 실행 중입니다. 이벤트가 발생할 때까지 moveLines의 실행을 지연해야합니다. 이렇게하려면 count 인수를 바인드 할 수 있도록 클로저를 만들어야합니다.

thisMoveLine.addEventListener('animationend', moveLines.bind(this, count), false); 

당신은

thisMoveLine.addEventListener('animationend', function(){ moveLines(count); }, false); 

Answer 2

먼저 다른 브라우저에서 애니메이션 이벤트에 대한 다른 이름이있을 수 있습니다 나를 위해 크롬에만 webkitAnimationEnd 제대로 작동합니다. 그래서 그것들 모두를 위해 핸들러를 묶는 것이 더 좋다. (이것을 위해 하나의 함수를 만들 수있다.)

count 매개 변수를 이벤트 처리기로 올바르게 전달하려면 익명 함수를 사용하거나 카운트 변수를 전역 범위로 이동하고 매개 변수없이 moveLines을 호출해야합니다.

addEventListener의 두 번째 인수로 'moveLines (count)'를 삽입하면 실제로는 moveLines 함수를 호출하고 함수 자체를 전달하는 대신 addEventListener에 결과를 전달합니다.

당신이 그것을 할당 할 경우 당신은, 당신의 핸들러를 실행중인 example