AnimationStart事件在IE11中未触发

我试图检测何时将具有特定CSS类的新元素添加到DOM中。我最初碰到OnDOMNodeInserted（事实证明，它在生产中使用太慢）以及Mutation Observers，它们在所有浏览器中都不起作用。我可以使用CSS动画找到一个可行的解决方案，从这篇博客文章：AnimationStart事件在IE11中未触发

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

我已经实现了这一点，它的工作在每一个浏览器，除了IE（好像我一直在说“它可以在IE浏览器中运行，“自从十多年前我开始web开发以来，这是另一回事）。这小提琴 - 这在其他浏览器精美的作品 - 提炼什么，我想下来做一个简单的形式：

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

基本的想法是与“requiresFeature” CSS类的东西都会默认情况下是隐藏的，只有在启用该功能时才会显示。如果该功能已启用并且该元素已添加，则应显示该元素。该小提琴中的“添加动态元素”链接为该DOM添加了一个具有此CSS类的新元素。

的“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中正常工作，但无论如何捅它，我都无法让我的小提琴在IE11中工作。任何人有任何想法？

只是为了解释一点关于小提琴的内容，T.WGE方法根据传入的布尔值打开或关闭特征（WorkGroup Enabled）。如果我明确地打开了特征（即使它已经打开） IE11，出现所有动态范围。但是，无论它处于什么状态，动画开始甚至都不会起作用。

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

来源

2016-09-28 Pax Noctis

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

看来，IE能够检测到我的动画没有做任何事情，并正在优化它。通过添加任何会触发实际动画的东西（即使样式变化实际上并没有改变显示器中的任何内容），我就可以启动事件。

我改变了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; 
    } 
}

来源

2016-09-28 22:41:18

AnimationStart事件在IE11中未触发

回答

相关问题