当我的动画结束时,transitionend事件不会触发

Question

我正在尝试使用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类.

Answer 1

你没有得到一个transitionend事件,因为你没有使用CSS过渡; 你正在使用CSS动画.animated和fadeOut类的CSS 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转换,它是一个CSS动画.它们在完成时触发不同的事件.

替换这个:

$(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',

有了这个:

$(this).on('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend',

而且我认为一切都应该正常.

$(this)我怀疑,当你把这个元素扔掉的时候发生了什么事实是一个巧合; 也许你有一个完全独立的处理程序,比如一个 mouseout处理程序,具有类似的行为,你误以为transitionend处理程序,或者你可能在悬停时应用了一些CSS转换,其中一个触发了transitionend与fadeOut完全无关的事件？