[英]transitionend event doesn't fire when my animation finishes
我正在尝试使用jQuery在css动画完成时触发事件并且它在很大程度上正常工作,但由于某种原因,在我将鼠标移离相关对象之前,不会调用transitionend
事件。
这是方法:
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();
}
});
}
它似乎主要是因为在第一个css动画结束后,如果我将鼠标放在$(this)
元素上,则不会触发transitionend
事件。 只要我将鼠标从元素上移开,一切都会完美无缺。
我真的很茫然这个,有什么想法吗? 我正在使用animate.css中的css类。
你没有得到transitionend
事件,因为你没有使用CSS过渡; 你正在使用CSS动画。 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;
}
那不是CSS转换 ,它是一个CSS动画 。 它们在完成时触发不同的事件。
替换这个:
$(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
有了这个:
$(this).on('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend',
而且我认为一切都应该正常。
当你抛弃$(this)
元素时发生的事情,我怀疑是巧合; 也许你有一个完全独立的处理程序,比如mouseout
处理程序,具有类似的行为,你错误地认为是transitionend
处理程序,或者你可能在悬停时应用了一些CSS转换,其中一个触发了一个完全与之无关的transitionend
事件淡出?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.