5

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

4

1 回答 1

12

你没有收到transitionend事件是因为你没有使用 CSS 过渡；您正在使用 CSS 动画。animated中的和fadeOut类的CSSanimate.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与淡出完全无关的事件？

于 2013-07-24T19:56:04.590 回答