Question

Hovering the mouse over an element flips it. I would like a JavaScript function to run when the transition started when the user mouses-off the element, completes.

i.e. I would like some JavaScript to run when the element returns to its natural state (un-flipped, in this case) when the user is no longer hovering over it.

I have tried to bind to the webkitTransitionEnd event, but this fires when the transition for hovering completes as well as when the transition for mouse-off completes. How can I distinguish between these two transitions?

My CSS looks like this:

.back {
position: absolute;
z-index: 800;
-webkit-transition: z-index 0s linear .25s, -webkit-transform .5s ease-in-out;
-moz-transition: z-index 0s linear .25s, -moz-transform .5s ease-in-out;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.searchResult:hover .back {
position: absolute;
z-index: 900;
-webkit-transition: z-index 0s linear .25s, -webkit-transform .5s ease-in-out;
-moz-transition: z-index 0s linear .25s, -moz-transform .5s ease-in-out;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}

My JavaScript looks something like this (unsuitable because fires on completion of both mouse over and mouse-off transitions (i.e. flip and un-flip)):

el.find('.back').bind("webkitTransitionEnd", function (e) { /* do stuff */ });

Answer 1

I think (I have yet to perform more than 2 minutes worth of testing) I have solved this issue.

The solution is to add a conditional in the javascript based upon a known CSS property of the event target element. In my case I know the z-index is different in the flipped and non-flipped states, and using this in my javascript appears to solve the issue.

The conditional looks like this:

 if(e.originalEvent.propertyName === '-webkit-transform' && 
    $(e.originalEvent.target).css('z-index') === '800') { 

   /*we know we are at the end of the correct transition*/ 

 }

My test browser is very modern however (at the time of writing): Chrome 22.0.1186.0 canary.