Trigger event during a css transition

advertisements

I want to add a class / set a custom z-index during a css transition. In my researches, I didn't find anything except webkitTransitionEnd which don't do the work.

I have an animated div on hover but if I hover multiple div, he go below the other, that's why I want to set a custom class during the transition (not during the hover).

Here is a jsfiddle (simplified for webkit)

and the problem in image

Edit: The real problem is when I hover a div, unhover, rehover, hover an other, so it's hard to do a simple timeout...


The problem is that when you "un-hover", the switch to the original z-index is happening instantaneously. So the rotating panel is no longer painted in front of its neighbours.

The easiest way to solve that is to make sure that the z-index value is being transitioned as well. It wasn't transitioning in your code as you had it, because z-index was being set on the parent div.panel but your transition functions were only applied to the child div.front and div.back.

This seems to work even when you switch between panels mid-transition:

http://jsfiddle.net/8Fvdb/1/

.panel{
  transition: z-index 1s;
}

(Note that I've commented-out the z-index values on the individual panel faces for simplicity; it doesn't seem to change anything either way on Chrome, haven't tested elsewhere.)