javascript - AnimationStart 事件在 IE11 中未触发

Question

我试图检测何时将具有特定 CSS 类的新元素添加到 DOM。我最初偶然发现了 OnDOMNodeInserted(事实证明在生产中使用它太慢)和 Mutation Observers，它们并不适用于所有浏览器。我能够使用 CSS 动画找到一个可行的解决方案，从这篇博客文章开始:

http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

我已经实现了这个，它可以在除 IE 之外的每个浏览器中工作(自从我十多年前开始 Web 开发以来，似乎我一直在说“它可以在除了 IE 之外的每个浏览器中工作”，但那是另一个故事了) 。这个 fiddle - 在所有其他浏览器中都能完美地工作 - 将我想要做的事情提炼成一个简单的形式:

https://jsfiddle.net/Lued2cLk/15/

基本上，这个想法是，默认情况下，任何具有“requiresFeature”CSS 类的内容都将被隐藏，并且仅在启用该功能时才显示。如果启用该功能并添加该元素，它应该会显示。该 fiddle 中的“添加动态元素”链接将具有此 CSS 类的新元素添加到 DOM。

“requiresFeature”类实现了一个名为“nodeInserted”的短动画(实际上并不为任何内容设置动画)，并且我们有文档级事件监听器等待动画开始:

 var event = function(e) {
    //alert('anim fired');
    if (e.animationName == 'nodeInserted') {
      T.WGE(T.WGE());
    }
  }

  document.addEventListener('animationstart', event, false);
  document.addEventListener('MSAnimationStart', event, false);
  document.addEventListener('webkitAnimationStart', event, false);

在 IE11 中任何情况下都不会触发animationstart 事件。最初我认为这可能是“visibility:hidden”属性的问题(我发现CSS类中的“display:none”会阻止动画在所有浏览器中触发)，但删除它没有效果，animationstart事件不会触发。

我上面链接的博客文章中的示例在 IE11 中运行良好，但无论我如何查看它，我都无法让我的 fiddle 在 IE11 中运行。大家有什么想法吗？

只是为了解释一下有关 fiddle 的信息，T.WGE 方法根据传入的 bool 值打开或关闭该功能(启用工作组)。如果我在 IE11 中显式打开该功能(即使它已经打开) ，所有动态跨度都出现。但无论处于什么状态，动画都不会启动。

查看问题的最简单方法是单击“打开功能”，然后单击“添加动态元素”。应该发生的是一个新的跨度，其中“这只会出现在启用的工作组中”应该出现并设置为可见，但实际发生的情况是添加了跨度，但使其可见的触发器永远不会运行。

Answer 1

不知何故，在 StackOverflow 上发布我的问题似乎总是能引导我找到解决方案。

看来 IE 能够检测到我的动画没有执行任何操作并正在对其进行优化。通过添加任何会触发实际动画的内容(即使更改的样式实际上不会改变显示中的任何内容)，我能够触发事件。

我将原来的 fiddle 中的 CSS 更改为这个并且它起作用了:

@keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    } 
}

@-moz-keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    } 
}

@-webkit-keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    } 
}

@-ms-keyframes nodeInserted {  
  from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    } 
}

@-o-keyframes nodeInserted {  
   from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    } 
}