Binding to a specific CSS transition

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 */ });

Not sure if this is helpful, but I found tympanus.net/codrops/2012/06/25/… today. If you can somehow bind an event to the runProgress 100% parameter it should be helpful. — Christopher Marshall
– Christopher Marshall, Commented Jun 27, 2012 at 21:09
Have you considered jQuery animations? In this case, it may be helpful because they're all-javascript and have handy callbacks. — Camilo Martin
– Camilo Martin, Commented Jun 27, 2012 at 21:15
Hi Camilo. I have considered JQuery callbacks, but I wish to use CSS3 transitions because of their improved performance on modern browsers. Correct me if this is a wrong assumption. — Ben Aston
– Ben Aston, Commented Jun 27, 2012 at 21:23

Ben Aston · Accepted Answer · 2012-06-27 21:48:03Z

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.

edited Jun 27, 2012 at 21:48

answered Jun 27, 2012 at 21:26

Ben Aston

56k69 gold badges221 silver badges351 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

methodofaction · Accepted Answer · 2012-06-27 21:28:14Z

0

The event listener actually fires multiple times, once for each property. You can access the property name with event.propertyName. Putting it all together...

element.addEventListener("webkitTransitionEnd", function(e){
    if(e.propertyName == "width") {
        doSomething();
    }
}, false);

or in jQuery

   $(element).on("webkitTransitionEnd", function(e){
        if(e.originalEvent.propertyName == "width") {
            doSomething();
        }
    });

answered Jun 27, 2012 at 21:28

methodofaction

72.7k22 gold badges158 silver badges166 bronze badges

1 Comment

Ben Aston Over a year ago

In this case the propertyName is -webkit-transform for both transitions and so I an unable to differentiate between the transitions in my JavaScript based on this. Please see my answer for my latest attempt at a solution.

Collectives™ on Stack Overflow

Binding to a specific CSS transition

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related