'transitionend'事件不会持续触发

Question

以下代码与Chrome不一致，但与

Firefox（使用'transitionend'）不一致。slogan_fade_next的功能只是console.log('end');。我总是将类名应用于第一个 span 元素，但是当我单击刷新按钮、重新加载或其他任何内容时，之后的任何内容都是命中和未命中。

应用于slogan[]的 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

而不是

    document.addEventListener('DOMContentLoaded', fade_setup);

你能用吗

    document.addEventListener('load', fade_setup)

对于您当前的实现，JavaScript 可能在浏览器完成应用样式之前运行，因此，在定义任何转换之前。

Answer 2

该问题是由应用样式和 Stephen 提到的任何其他内容的计时问题引起的。问题是，当我尝试触发第一个淡入时，事情还没有解决，所以我用window.onload=slogan_fade_next;触发了它。当我的第一个元素完成它的事情时，一切都已经安定下来了。

除了"它有效"之外，我绝对没有考虑过这个问题，我相信我会想出更好的方法来做到这一点。