I'm trying to use jQuery to fire an event when a css animation finishes and it's largely working, but for some reason the transitionend
event doesn't get called until I move my mouse off of the object in question.
Here's the method:
function replaceWithSearch(){
var searchWrapper = constructSearchBox("");
$(this).addClass("animated fadeOut"); // css animation
$(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function (e){
console.log(e);
$(this).parent().replaceWith(searchWrapper);
if (document.URL.indexOf("search?s=") == -1){
document.getElementById("searchbox").focus();
}
});
}
It mostly seems to work with the exception that after the first css animation finishes, if I keep my mouse on the $(this)
element the transitionend
event won't fire. As soon as I move my mouse off of the element everything works perfectly.
I'm really at a loss with this one, any ideas? I'm using the css classes in animate.css .
You're not getting a transitionend
event because you're not using CSS transitions; you're using CSS animations. The CSS of the animated
and fadeOut
classes in animate.css
is as follows:
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.fadeOut {
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
-o-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@-moz-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@-o-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.animated.fadeOut {
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
-o-animation-name: fadeOut;
animation-name: fadeOut;
}
That's not a CSS transition , it's a CSS animation . They trigger different events on completion.
Replace this:
$(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
with this:
$(this).on('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend',
and I think everything should work fine.
The fact that something was happening when you moused off the $(this)
element is, I suspect, a coincidence; perhaps you have an entirely separate handler, like a mouseout
handler, with similar behavior that you're mistaking for the transitionend
handler, or perhaps you have some CSS transitions being applied on hover and one of those is triggering a transitionend
event completely unrelated to the fadeOut?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.