Skip to content

Instantly share code, notes, and snippets.

@LoyEgor
Last active July 17, 2018 21:31
Show Gist options
  • Save LoyEgor/fa1bfffcfe9565c2d40137ffdc2d534f to your computer and use it in GitHub Desktop.
Save LoyEgor/fa1bfffcfe9565c2d40137ffdc2d534f to your computer and use it in GitHub Desktop.
check end of transition animation and prevent start twice
// check transitions end
function whichTransitionEvent() {
var t,
el = document.createElement("fakeelement");
var transitions = {
"transition": "transitionend",
"OTransition": "oTransitionEnd",
"MozTransition": "transitionend",
"WebkitTransition": "webkitTransitionEnd"
}
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
}
var transitionEvent = whichTransitionEvent();
// check animations end
function whichAnimationEvent() {
var t,
el = document.createElement("fakeelement");
var animations = {
"animation": "animationend",
"OAnimation": "oAnimationEnd",
"MozAnimation": "animationend",
"WebkitAnimation": "webkitAnimationEnd"
}
for (t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
}
var animationEvent = whichAnimationEvent();
$(".button").click(function() {
$(this).addClass("animate");
$(this).one(transitionEvent,
function(event) {
// Do something when the transition ends
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment