Is this just me, or does the transitionend event does not fire in IE10/11 if the element to which it's attached is disabled?
This code below works as you'd expect in Chrome (the alert is shown when the transition completes), but does not work in IE10/11. If you remove the disabled attribute from the target button, however, it works.
document.getElementById("a").addEventListener("transitionend", onTransitionEnd, false);
document.getElementById("b").addEventListener("click", fadeButton, false);
function fadeButton(e) {
document.getElementById("a").style.opacity = 0;
}
function onTransitionEnd(e) {
alert("Transition end");
}button {
display: block;
margin: 1em 0;
}
#a {
-webkit-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}<button id="a" type="button" disabled>Target</button>
<button id="b" type="button">Fade the Target Button</button>Does that make sense?
Either way - I'm posting this to SO in case it helps someone else who's run into this problem. (I just wasted two hours trying to figure out why the transition event was never fired...)
