Question

我有一个包含三个p元素的测试页面，它们的不透明度设置为零。加载DOM时会调用以下函数。这会在每个调用transitionend的p元素上设置slogan_fade_next事件。该函数应用'slogan-fadein'类，在每次转换完成时将不透明度设置为1.0。

在我的测试页面上，我在DOMContentLoaded触发时调用此函数

  function fade_setup(){
    var el = document.getElementsByClassName('slogan')[0];
    el = el.getElementsByTagName('p');
    for(var i=0;el[i];i++){
      el[i].addEventListener('transitionend',slogan_fade_next,true);
   }
   el[0].className='slogan-fadein';
  }

最后一行开始整个滚动，它在除IE10之外的每个浏览器中都很好用，IE10是我测试过的唯一IE。slogan_fade_next函数永远不会被调用。我通过在该函数的开头放置一个console.log来测试这个，IE10中没有任何记录，但其他所有浏览器都运行正常（Chrome，Firefox，Opera，Safari）。

有人发现了我遗失的任何东西吗？请参阅下面的编辑。

  function slogan_fade_next(){
    var el = document.getElementsByClassName('slogan')[0];
    el = el.getElementsByTagName('p');
    for(var i=0;el[i];i++){
      if(el[i].className != 'slogan-fadein'){
        el[i].className = 'slogan-fadein';
        break;
      }
    }
  }
  .slogan p {
    opacity:0;
    transition:opacity .5s;
  }
  .slogan .slogan-fadein {
    opacity:1;
  }
<div class='slogan'>
  <p>one</p>
  <p>two</p>
  <p>three</p>
</div>

编辑：我没有展示的一件事是Vimeo视频。不知怎的，Vimeo的标记干扰了IE中的这个工作，但这就是我所知道的。这是我在此测试页面上的标记：

<div class='videoWrapper'>
<iframe width='960' height='600' src="//player.vimeo.com/video/xxxxxx" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

EDIT2： Vimeo会插入一个脚本，该脚本会对transitionend和opacity执行某些操作。我不知道为什么它只影响IE，但确实如此。希望其他人知道或将花时间找到问题，但我现在不能。我可以向Vimeo提交问题报告。

'transitionend'事件未在IE10中触发

0 个答案: