动画结束后，transitionend事件不会触发 [英] transitionend event doesn't fire when my animation finishes

问题描述

我正尝试使用jQuery在CSS动画结束并且可以正常工作时触发一个事件，但是由于某些原因，直到我将鼠标移开时，才会调用 transitionend 事件有问题的对象.

I'm trying to use jQuery to fire an event when a css animation finishes and it's largely working, but for some reason the transitionend event doesn't get called until I move my mouse off of the object in question.

这是方法:

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 事件将不会出现，这似乎可以正常工作开火.只要将鼠标从元素上移开，一切都将正常运行.

It mostly seems to work with the exception that after the first css animation finishes, if I keep my mouse on the $(this) element the transitionend event won't fire. As soon as I move my mouse off of the element everything works perfectly.

我真的不知所措，有什么想法吗?我在 animate.css 中使用css类.

I'm really at a loss with this one, any ideas? I'm using the css classes in animate.css.

推荐答案

您没有得到 transitionend 事件，因为您没有使用CSS过渡.您正在使用CSS动画.animate.css 中 animated 和 fadeOut 类的CSS如下:

You're not getting a transitionend event because you're not using CSS transitions; you're using CSS animations. The CSS of the animated and fadeOut classes in animate.css is as follows:

.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动画.它们在完成时会触发不同的事件.

That's not a CSS transition, it's a CSS animation. They trigger different events on completion.

替换此:

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

与此:

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

我认为一切都应该正常工作.

and I think everything should work fine.

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

The fact that something was happening when you moused off the $(this) element is, I suspect, a coincidence; perhaps you have an entirely separate handler, like a mouseout handler, with similar behavior that you're mistaking for the transitionend handler, or perhaps you have some CSS transitions being applied on hover and one of those is triggering a transitionend event completely unrelated to the fadeOut?

这篇关于动画结束后，transitionend事件不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！