transitiononed事件不;我的动画结束时不要开火

transitionend event doesn't fire when my animation finishes

本文关键字：结束 开火 我的 事件 transitiononed 动画      更新时间：2023-09-26

我正试图在css动画完成并基本正常工作时使用jQuery来激发事件，但由于某种原因，直到我将鼠标从有问题的对象上移开，才会调用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类

您没有得到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转换，其中之一是触发一个与fadeOut完全无关的transitionend事件？

相关文章：