Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Binding to a specific CSS transition

Binding to a specific CSS transition

Problem

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 */ });
Problem courtesy of: Ben Aston

Solution

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.

Solution courtesy of: Ben Aston

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Binding to a specific CSS transition

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×