javascript - 当我的动画完成时，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 transition , 这是一个 CSS animation .它们在完成时触发不同的事件。

替换这个:

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

用这个:

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

而且我认为一切都应该工作正常。

我怀疑，当您将鼠标移开 $(this) 元素时，发生了一些事情，这是巧合；也许您有一个完全独立的处理程序，例如 mouseout 处理程序，具有您误认为是 transitionend 处理程序的类似行为，或者您可能应用了一些 CSS 转换悬停，其中之一是触发一个与 fadeOut 完全无关的 transitionend 事件？