Transition event does not fire when my animation ends

Question

I am trying to use jQuery to fire an event when the css animation ends and it works pretty much, but for some reason the transitionend event is not raised until I pull the mouse out of the object.

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

This basically works with the exception that after completing the first css animation, if I hold the mouse on the $(this) element, the transitionend event will not fire. As soon as I disconnect the mouse from the item, everything works fine.

Am I really at a loss with this, any ideas? I am using css classes in animate.css .

Answer 1

You are not getting a transitionend event because you are not using CSS transitions; You are using CSS animations. The CSS of the animated and fadeOut in animate.css 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; } 

This is not a CSS transition, this is a CSS animation . They fire various events upon 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 happened when you exaggerated the $(this) element, I suspect a coincidence; maybe you have a separate handler, like a mouseout handler, with the same behavior that you accept for the transitionend handler, or maybe you have some CSS transitions that are applied on hover, and one of them fires a transitionend event that is not completely connected with fadeOut?