2016-09-28 11 views
1

特定のCSSクラスを持つ新しい要素がDOMに追加されたときを検出しようとしています。私はもともとOnDOMNodeInserted(本番環境で使用するには遅すぎると判明した)とMutation Observers(すべてのブラウザで動作しなかった)に当たった。私はこのブログの記事で始まる、CSSアニメーションを使用して実行可能な解決策を見つけることができた:私はこれを実装しているAnimationStartイベントがIE11で起動しない

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

、それはIEを除く、すべてのブラウザで働いている(それは私が」と言ってきたように思えます私は10年以上前にウェブ開発を始めて以来、IE以外のすべてのブラウザで動作していますが、それは別の話です)。このフィドル - 他のすべてのブラウザで美しく動作します - 私は、単純なフォームまで何をしようとしている蒸留:

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

基本的な考え方は、「requiresFeature」CSSクラスを使って何がということですデフォルトでは非表示に設定され、機能が有効になっている場合にのみ表示されます。機能が有効になっていて、要素が追加されている場合は、それが表示されます。そのフィドルの「Add dynamic element」リンクは、この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の状況がアニメーションの開始イベントです。もともと、私はそれが 'visibility:hidden'プロパティ(これはCSSクラスの 'display:none'がすべてのブラウザでアニメーションの実行を妨げることが判明しました)に問題があると思っていましたが、それを削除しても効果はありません。イベントは発生しません。

私が上にリンクしたブログ記事の例はIE11でもうまくいきますが、私はそれをどのように突き刺してもIE11で私のフィドルを得ることはできません。誰でも考えがありますか?

T.WGEメソッドは、渡されたブール値に基づいてフィーチャー(WorkGroup Enabled)をオンまたはオフに切り替えます。(既にオンの場合でも)フィーチャーを明示的にオンにするとIE11では、すべての動的スパンが表示されます。しかし、どのような状態であっても、アニメーションは起動しません。

私の問題を実際に見られる最も簡単な方法は、「Turn Feature On」をクリックし、次に「Add Dynamic Element」をクリックすることです。何が起こるべきかは、「これはWGにのみ表示されます」という新しいスパンが表示され、可視に設定されるはずですが、実際にはスパンが追加されますが、可視にするトリガーは決して実行されません。

答えて

0

何とか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; 
    } 
} 
関連する問題