'transitionend' event does not fire consistently

Question

The following code works inconsistently with Chrome but also Firefox (with 'transitionend'). The function slogan_fade_next is just console.log('end');. I always get the classname applied to the first span element but anything after that is hit-and-miss when I click the refresh button, reload, or anything else.

The class of slogan-fadein applied to slogan[] changes the opacity of the element from zero to one but the callback function fade_setup isn't called consistently.

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

The problem is caused by a timing issue with applying the styles and anything else as mentioned by Stephen. The problem is, things aren't settled by the time I try to fire the first fade in so I triggered that with window.onload=slogan_fade_next;. Everything has settled in by the time my first element has done its thing.

I've given absolutely no more thought to this other than "it works" and I'm sure I'll come up with a better way to do this.

Answer 2

instead of

    document.addEventListener('DOMContentLoaded', fade_setup);

can you use

    document.addEventListener('load', fade_setup)

With your current implementation, the JavaScript may be running before the browser has finished applying styles and, therefore, before any transitions are defined.