CODEWITHSUNDEEP
javascripteventsaddeventlistenertransitionend
Rob
Rob

Reputation: 15168

'transitionend' event does not fire consistently

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);

Upvotes: -3

Views: 1261

Answers (2)

Rob
Rob

Reputation: 15168

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.

Upvotes: 1

Stephen Thomas
Stephen Thomas

Reputation: 14053

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.

Upvotes: 2

Related Questions