-1

以下代码与 Chrome 和 Firefox（使用“transitionend”）不一致。功能slogan_fade_next只是console.log('end');. 我总是将类名应用到第一个 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);
4

2 回答 2

3

代替

    document.addEventListener('DOMContentLoaded', fade_setup);

你能用吗

    document.addEventListener('load', fade_setup)

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

于 2014-01-07T21:08:24.973 回答
1

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

除了“它有效”之外，我完全没有考虑过这一点，我相信我会想出一个更好的方法来做到这一点。

于 2014-01-07T22:54:39.133 回答