我正在尝试使用 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
事件不会触发。一旦我将鼠标从元素上移开,一切都会完美运行。
我真的对这个很茫然,有什么想法吗?我正在使用 css 类动画.css https://github.com/daneden/animate.css.
你没有得到transitionend
事件,因为您没有使用 CSS 过渡;你正在使用 CSS 动画。 CSS 的animated
and fadeOut
班级在animate.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 过渡 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions, 它是CSS动画 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations。它们在完成时触发不同的事件。
替换这个:
$(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
有了这个:
$(this).on('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend',
我认为一切都应该很好。
事实上,当您将鼠标移开时,某些事情正在发生$(this)
我怀疑这个因素是巧合;也许你有一个完全独立的处理程序,比如mouseout
处理程序,其行为与您误认为的类似transitionend
处理程序,或者您可能在悬停时应用了一些 CSS 转换,其中之一正在触发transitionend
事件与淡出完全无关?
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)