Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
The standard version of detecting the correct transitionEnd event fails on the Galaxy S3 mini, which is why I came up with this ugly workaround. See discussion here: http://davidwalsh.name/css-animation-callback Requires a jQuery-like DOM lib in this version.
// detect transitionEnd event (takes up to 2 ms)
var possibleTransitionEndEvents = 'webkitTransitionEnd MozTransitionEnd oTransitionEnd transitionend';
var foundTransitionEndEvent = possibleTransitionEndEvents; // gets replaced by the real one or false
var style = $('<style>test{position:absolute;left:-999px}test.transition{color:red}</style>').appendTo('head');
var testElement = $('<test></test>')
.css('transition', 'all 1ms linear')
.one(possibleTransitionEndEvents, function (event) {
$(event.currentTarget).remove();
style.remove();
foundTransitionEndEvent = event.type; // save the event that actually finishes in our closure variable
})
.appendTo('body');
// must do this asynchronously; the transition is started on class *change*
window.setTimeout(function () {
testElement.addClass('transition');
}, 0);
// if foundTransitionEndEvent was not overwritten by out endtransition method, then we do not have any transitionEnd event
// and we default to all events

What's the harm in just using all events from the start, are any browsers known to send more than one event?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment