Is it possible to get a notification (like callback) when a CSS transition has been completed?
Is it possible to get a notification (like callback) when a CSS transition has been completed?
I know that Safari implements a webkitTransitionEnd callback that you can attach directly to the element with the transition.
Their example (reformatted to multiple lines):
box.addEventListener(
'webkitTransitionEnd',
function( event ) {
alert( "Finished transition!" );
}, false );
This can easily be achieved with the transitionend Event see documentation here
A simple example:
document.getElementById("button").addEventListener("transitionend", myEndFunction);
function myEndFunction() {
this.innerHTML = "Transition event ended";
}
#button {transition: top 2s; position: relative; top: 0;}
<button id="button" onclick="this.style.top = '55px';">Click me to start animation</button>