Transitionend auf Pseudo-Element nicht auf Edge

Question

Diese fiddle funktioniert gut in Chrome, aber in Edge-Browser das "transitionend" -Ereignis nicht ausgelöst.

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); 

Bitte helfen,
Michael

Answer 1

Wenn Sie das entfernen: vor von Ihrem CSS-Selektoren und einfach das #a Element verwenden, wird Ihre Geige in MS Rand arbeiten. 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; 
} 

Ich fand auch, dass Calc mit() aus dem Brennen in MS Edge das transitionstart und transitionend Ereignisse verhindert.

#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; 
} 

Von ein paar Geigen, finde ich, dass weder: vor /: nach pseudo-Elemente noch calc() in MS Rand zur Zeit unterstützt. Diese Probleme werden bei CanIUse, W3Schools oder der MS Edge-Dokumentation noch nicht erwähnt.

Übrigens verwendet der Übergang MS Edge das erste Element in Ihrem Objekt ('Übergang': 'Transitionend').