How do I detect a transition end without a JavaScript library?

javascript callback css-transitions custom-event
Matt Norris picture Matt Norris · Jan 11, 2012 · Viewed 8k times · Source

I'd like to delete an object after it's done animating with a CSS transition, but I'm not able to use a JavaScript library.

How do I detect when the animation is done? Do I use a callback or custom event somehow?

Answer

Joseph Silber picture Joseph Silber · Jan 11, 2012 
element.addEventListener('transitionend', function(event) {
    alert("CSS Property completed: " + event.propertyName);
}, false );

For now, the exact event name has not been standardized. Here's a quote from MDN:

There is a single event that is fired when transitions complete.
In all standard-compliant browser, the event is transitionend,
in WebKit it is webkitTransitionEnd.

Here's the fiddle for Webkit: http://jsfiddle.net/bNgWY/

Related questions

How can I pass a parameter to a setTimeout() callback?

I have some JavaScript code that looks like: function statechangedPostQuestion() { //alert("statechangedPostQuestion"); if (xmlhttp.readyState==4) { var topicId = xmlhttp.responseText; setTimeout("postinsql(topicId)",4000); } } function postinsql(topicId) { //alert(topicId); } I get an error that topicId is not defined Everything was working before …

Read More
How to make a function wait until a callback has been called using node.js

I have a simplified function that looks like this: function(query) { myApi.exec('SomeCommand', function(response) { return response; }); } Basically i want it to call myApi.exec, and return the response that is given in the callback lambda. However, the above …

Read More
How to access the correct `this` inside a callback?

I have a constructor function which registers an event handler: However, I'm not able to access the data property of the created object inside the callback. It looks like this does not refer to the object that was created but …

Read More