transitionend event doesn't fire when my animation finishes

animation, css, events, javascript, jquery

Solution

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;
}

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

Replace this:

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

with this:

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

and I think everything should work fine.

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?

Problem

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. Here's the method: ``` 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(); } }); } ``` 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. I'm really at a loss with this one, any ideas? I'm using the css classes in animate.css.

Original source