-
-
Save depoulo/9dc8f59d791ec8f8e40c to your computer and use it in GitHub Desktop.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 |
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
What's the harm in just using all events from the start, are any browsers known to send more than one event?