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中未觸發

回答

相關問題