Exploring the potential of CSS3 animation to detect when an input transitions from the enable to disable state, I encountered a challenge specifically in Firefox.
Here is the code snippet that showcases the issue:
HTML:
<input type="text">
<button>Enable/Disable Input</button>
jQuery:
$(document).on('animationend webkitAnimationEnd', ':input', function (e) {
if (e.originalEvent.animationName === "disabled") {
alert('disabled!')
}
else if (e.originalEvent.animationName === "enabled") {
alert('enabled!')
}
})
CSS:
input:disabled {
-webkit-animation: disabled 1ms;
animation: disabled 1ms;
}
@-webkit-keyframes disabled {
to {
opacity:inherit;
}
}
@keyframes disabled {
to {
opacity:inherit;
}
}
input:enabled {
-webkit-animation: enabled 1ms;
animation: enabled 1ms;
}
@-webkit-keyframes enabled {
to {
opacity:inherit;
}
}
@keyframes enabled {
to {
opacity:inherit;
}
}
Expected Outcome:
The event animationend should trigger when the input changes from enable to disable and vice versa.
Current Behavior:
This functionality behaves as expected in Chrome and IE10/11 but not in Firefox where the event does not fire when the input is disabled. While this may be anticipated behavior, it raises the question:
Is there a workaround to prompt Firefox to trigger the `animationend` event on disabled elements?
Note: Animation functions properly on disabled elements in Firefox; it's specifically the bound animationend event that doesn't occur.