I have attached transitionend event listener to element like this:
element.addEventListener('transitionend', transitionEnd);
function transitionEnd() {
console.log('transitionEnd fired');
}
This is working fine except for one thing: if you lose focus on the page (open another tab or any other window) the event does not fire!!!
Why is this happening and how to fix this?
Check your transition-property property.
The transitionend event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the
transition-propertyis removed ordisplayis set tonone, then the event will not be generated.
Source: HTMLElement: transitionend event