[英]transitionend event doesn't fire when my animation finishes
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. 我正在尝试使用jQuery在css动画完成时触发事件并且它在很大程度上正常工作,但由于某种原因,在我将鼠标移离相关对象之前,不会调用
transitionend
事件。
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. 它似乎主要是因为在第一个css动画结束后,如果我将鼠标放在
$(this)
元素上,则不会触发transitionend
事件。 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 .
我正在使用animate.css中的css类。
You're not getting a transitionend
event because you're not using CSS transitions; 你没有得到
transitionend
事件,因为你没有使用CSS过渡; you're using CSS animations. 你正在使用CSS动画。 The CSS of the
animated
and fadeOut
classes in animate.css
is as follows: animate.css
animated
和fadeOut
类的CSS如下:
.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 . 那不是CSS转换 ,它是一个CSS动画 。 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; 当你抛弃
$(this)
元素时发生的事情,我怀疑是巧合; 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? 也许你有一个完全独立的处理程序,比如
mouseout
处理程序,具有类似的行为,你错误地认为是transitionend
处理程序,或者你可能在悬停时应用了一些CSS转换,其中一个触发了一个完全与之无关的transitionend
事件淡出?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.