當我的動畫結束時，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動畫。 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事件淡出？