Событие «переходное событие» не срабатывает постоянно

Question

Следующий код работает некорректно с Chrome, но также и с Firefox (с возможностью «перехода»). Функция slogan_fade_next - это всего лишь . Я всегда получаю имя класса, примененное к первому элементу span, но что-то после этого происходит при нажатии кнопки обновления, перезагрузки или чего-то еще.

Класс slogan-fadein, примененный к slogan[], изменяет непрозрачность элемента от нуля до одного, но функция обратного вызова 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

Проблема связана с проблемой времени с применением стилей и всего остального, как упомянуто Стивеном. Проблема в том, что все вещи не урегулированы к тому моменту, когда я пытаюсь запустить первое затухание, поэтому я вызвал это с помощью window.onload=slogan_fade_next;. Все уладилось к тому моменту, когда мой первый элемент сделал свое дело.

Я больше не думал об этом, кроме «он работает», и я уверен, что придумаю лучший способ сделать это.

Answer 2

вместо

document.addEventListener('DOMContentLoaded', fade_setup); 

вы можете использовать

document.addEventListener('load', fade_setup) 

С вашей текущей реализации JavaScript может быть запущен до того, как браузер закончил применения стилей, и, следовательно, перед любыми переходами определены.