Question

我正在尝试检测何时将具有特定CSS类的新元素添加到DOM中。我最初遇到OnDOMNodeInserted（事实证明在生产中使用太慢）和Mutation Observers，它在所有浏览器中都不起作用。我能够使用CSS动画找到一个可行的解决方案，从这篇博文开始：

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

我已经实现了这个并且它在除了IE之外的每个浏览器中工作（似乎我一直在说“它可以在每个浏览器中运行但是IE”，因为我十多年前开始进行Web开发，但这是另一个故事）。这个小提琴 - 在其他所有浏览器中都能很好地工作 - 将我想要做的事情提炼成一个简单的形式：

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

基本上，我们的想法是默认情况下会隐藏任何带有'requiresFeature'CSS类的内容，并且只有在启用该功能时才会显示。如果启用了该功能并添加了该元素，则应该显示该元素。该小提琴中的“添加动态元素”链接将一个带有此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'会阻止动画在所有浏览器中触发），但删除它没有效果，动画启动事件不会发生。

上面链接的博客文章中的示例在IE11中运行良好，但无论我如何嘲笑它，我都无法在IE11中使用我的小提琴。有人有什么想法吗？

为了解释一下这个小提琴，T.WGE方法根据传入的布尔值打开或关闭该功能（WorkGroup Enabled）。如果我在IE11中明确打开该功能（即使它已经打开），所有动态范围都出现了。但是在任何时候，无论它处于什么状态，动画启动甚至都会开火。

查看我的问题的最简单方法是单击“打开功能”，然后单击“添加动态元素”。应该出现的新版本是“只会出现在WG中才会显示”，并且设置为可见，但实际发生的是添加了跨度但是使其可见的触发器永远不会运行。

Answer 1

以某种方式在StackOverflow上发布我的问题似乎总是引导我找到解决方案。

似乎IE能够检测到我的动画没有做任何事情并且正在优化它。通过添加任何会触发实际动画的内容（即使样式更改后实际上没有更改显示中的任何内容），我也能够触发事件。

我在原来的小提琴中改变了CSS并且它有效：

[1 2 3 5 8 9 ; 
 9 8 7 5 2 1 ; 
 1 2 0 1 0 1 ]

在IE11中没有触发AnimationStart事件

1 个答案: