我正在尝试使用jQuery在css动画完成时触发事件并且它在很大程度上正常工作,但由于某种原因,在我将鼠标移离相关对象之前,不会调用transitionend事件.
这是方法:
@H_301_8@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类.
最佳答案
你没有得到过渡事件,因为你没有使用CSS过渡;你正在使用CSS动画. animate.css中动画和fadeOut类的CSS如下:
@H_301_8@.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 transition,它是CSS animation.它们在完成时触发不同的事件.
替换这个:
@H_301_8@$(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
有了这个:
@H_301_8@$(this).on('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend',
而且我认为一切都应该正常.
当你抛弃$(this)元素时发生的事情,我怀疑是巧合;也许你有一个完全独立的处理程序,比如mouSEOut处理程序,具有类似的行为,你错误地认为是transitionend处理程序,或者你可能在悬停时应用了一些CSS转换,其中一个触发了一个完全与之无关的transitionend事件淡出?