CODEWITHSUNDEEP
javascriptjqueryhtmlcssevents
Tib
Tib

Reputation: 2631

Trigger event during a css transition

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

Upvotes: 2

Views: 230

Answers (2)

AmeliaBR
AmeliaBR

Reputation: 27544

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

Upvotes: 2

Andrea Parodi
Andrea Parodi

Reputation: 5614

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");

Upvotes: 0

Related Questions