'transitionend'이벤트가 지속적으로 실행되지 않습니다

Question

다음 코드는 Chrome과 일관되게 작동하지 않지만 Firefox ('transitionend'포함)와 작동합니다. slogan_fade_next 함수는 입니다. 나는 classname을 첫 번째 스팬 요소에 적용 시키지만, 새로 고침 단추, 다시로드 또는 다른 것을 클릭하면 그 이후의 모든 것이 히트 앤 미스입니다.

에 적용되는 slogan-fadein 클래스는 요소의 불투명도를 0에서 1로 변경하지만 콜백 함수 fade_setup은 일관되게 호출되지 않습니다.

function fade_setup(){ 
    var el = document.getElementsByClassName('slogan')[0]; 
    el = el.getElementsByTagName('span'); 
    for(var i=0;el[i];i++){ 
     el[i].addEventListener('webkitTransitionEnd',slogan_fade_next,false); 
    } 
    el[0].className='slogan-fadein'; 
    } 

    document.addEventListener('DOMContentLoaded', fade_setup); 

Answer 1

이 문제는 Stephen에서 언급 한 스타일 및 기타 사항을 적용 할 때 타이밍 문제로 인해 발생합니다. 문제는 첫 번째 페이드 인을 시도 할 때 상황이 해결되지 않기 때문에 내가 window.onload=slogan_fade_next;으로 트리거했기 때문입니다. 첫 번째 요소가 그 일을 처리 할 때까지 모든 것이 정착했습니다.

나는 "작동한다"는 것 외에는 더 이상 생각하지 않았다. 나는 이것을하기위한 더 좋은 방법을 생각해 낼 것이다.

Answer 2

대신

document.addEventListener('DOMContentLoaded', fade_setup); 

당신은 어떤 전환하기 전에 브라우저는 따라서 스타일을 적용 마무리하기 전에, 자바 스크립트, 실행중인 현재 구현

document.addEventListener('load', fade_setup) 

을 사용할 수 있습니다 정의됩니다.