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: 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) {
foundTransitionEndEvent = event.type; // save the event that actually finishes in our closure variable
// must do this asynchronously; the transition is started on class *change*
window.setTimeout(function () {
}, 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?

We use the script from David Walsh but changed the order, so WebkitTransition comes before transition. Works on Samsung S3!

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