エッジで擬似要素のトランジションが発生しない

Question

このfiddleはChromeでうまくいきますが、エッジブラウザでは「移行」イベントは発生しません。助けてください

function detectTransitionEvent(){ 
    var t; 
    var el = document.createElement('fakeelement'); 
    var transitions = { 
    'transition':'transitionend', 
    'OTransition':'oTransitionEnd', 
    'MozTransition':'transitionend', 
    'WebkitTransition':'webkitTransitionEnd' 
    } 

    for(t in transitions){ 
    if(el.style[t] !== undefined){ 
     return transitions[t]; 
    } 
    } 
} 
END_TRANSITION_EVENT = detectTransitionEvent(); 

function f() { alert(1); } 
var d = document.getElementById("a"); 

d.addEventListener(END_TRANSITION_EVENT, f); 

、
マイケル

Answer 1

削除した場合：あなたのCSSセレクタから前に、と単純に#A要素を使用するには、あなたのフィドルはMSエッジで動作します。 New Fiddle

#a { 
    content: ""; 
    display: block; 
    width: 100px; 
    height: 100px; 
    background: red; 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    transition: all .3s ease; 
} 
#a:hover { 
    width: 200px; 
} 

は私も）（計算値を使用してMSエッジで焼成からtransitionstartとtransitionendイベントを防止することを見出しました。いくつかのフィドルから

#a{ 
    content: ""; 
    display: block; 
    width: calc(50%); 
    height: 100px; 
    background: red; 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    transition: all .3s ease; 
} 

、私はどちらのことを見つける：/前：疑似要素もCALC（後）は、現時点ではMSエッジでサポートされています。これらの問題はCanIUse、W3Schools、またはMS Edgeのドキュメントではまだ触れられていません。

ちなみに、遷移MS Edgeは、オブジェクトの最初の要素を使用します（ 'transition'： 'transitionend'）。