Trigger event during a css transition

Question

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 enter image description here

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

Why don't you trigger the transition with javascript, then you can easily add the z-index, set an timeout with your transition duration and set the z-index back? — K. Biermann
– K. Biermann, Commented Feb 1, 2014 at 16:29

AmeliaBR · Accepted Answer · 2014-02-01 17:04:10Z

2

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.)

answered Feb 1, 2014 at 17:04

AmeliaBR

27.6k6 gold badges90 silver badges123 bronze badges

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

Comments

Andrea Parodi · Accepted Answer · 2014-02-01 16:33:24Z

0

I would give for granted that the CSS transition will succeed, and just remove the class after a timeout equal to the transition time:

with a transition of 2s:

.panel {
   transition: opacity 2s;
}

set this timeout to remove the class after 2000 ms:

setTimeout(function(){
    //you remove the class after the transition time
    $('.panel').removeClass("transition-running");
},2000)

$('.panel')
     //you add the class before changing the style
    .addClass("transition-running")    
    .css("opacity","0.1");

answered Feb 1, 2014 at 16:33

Andrea Parodi

5,64229 silver badges46 bronze badges

6 Comments

Tib Over a year ago

My main problem is if you hover : the transition start. If you unhover during that transition, the transition goes back, so a timer mean nothing, the duration of the flip depend on the duration time of the hover

Andrea Parodi Over a year ago

Maybe you can use the hover event to add class. I'll try to edit the fiddle

Andrea Parodi Over a year ago

Your jsfiddle is not showing the effect you showed in the picture... has you changed the effect you are using?

Tib Over a year ago

It's from the same fiddle, just hover to trigger the transition and move the mouse back (you have < 1sec :)

Andrea Parodi Over a year ago

Yes, but the 3d effect showed in the picture it's not working. I'm using chrome on Ubuntu

|

Collectives™ on Stack Overflow

Trigger event during a css transition

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related