Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS transitions don't work unless I use timeout

I have a couple of classes: hide is display: none, and transparent is opacity: 0. The element pr_container has -webkit-transition: opacity 1s. The following JQuery-based code makes an element appear in an animated fasion:

pr_container.removeClass("hide");
setTimeout(function() { pr_container.removeClass("transparent"); }, 0);

However, when I remove setTimeout and instead just remove the second class, there is no animation. Why?

Edit: I'm using the latest Chrome, I haven't checked other browsers yet.

Edit: I tried putting both calls in the same setTimeout callback - no animation. So it's clearly about separation.

Edit: here's the jsFiddle: http://jsfiddle.net/WfAVj/

like image 489
Alexei Averchenko Avatar asked Feb 14 '13 10:02

Alexei Averchenko


2 Answers

You can't make a transition if you are changing display property at the same time. So in order to make it work you have to hide your element some other way. For example:

.hide {
    height: 0;
    width: 0;
    /* overflow: hidden; padding: 0; border: none; */
}

http://jsfiddle.net/dfsq/WfAVj/1/

like image 79
dfsq Avatar answered Oct 30 '22 11:10

dfsq


There's no reasonable "curve" to transit from one display status to another, so in current implementation of browsers, any transition that somehow involves display will end up with no transition at all.

With this code:

pr_container.removeClass("hide");
pr_container.removeClass("transparent");

You can imagine the two statements execute in a single "blocking" queue, so browsers practically renders the element from class="hide transparent" to class="", and as stated above, the hide class practically invalidates any existing transition.

By using

pr_container.removeClass("hide");
setTimeout(function() { pr_container.removeClass("transparent"); }, 0);

You told browsers to remove the "transparent" class "as soon as possible, but no in the same queue", so browser first removes "hide", and then moves on. The removal of "transparent" happens when the browser think it has resource to spare, thus the transition does not get invalidated.

like image 22
Passerby Avatar answered Oct 30 '22 10:10

Passerby