0

I have the following CSS (3) class:

.VisiblePage
{
    -webkit-box-shadow: none;
    -webkit-transform: rotate(0deg);
}

In JavaScript I assign the class to a DOM element in a 'page' variable as follows:

page.className += " VisiblePage";

However, when I set the 'display' of the 'page' element to 'block' on the next line, the assignment of the VisiblePage class no longer results in its box-shadow and transform being applied:

page.className += " VisiblePage";
page.style.display = "block";

Changing the order of the two lines does not make a difference.

Does anyone have an explanation for this?

Currently I have an ugly workaround that works:

setTimeout(function () {
    page.className += " VisiblePage";
}, 0);
page.style.display = "block";

but I would like to get rid of it.

Jeroen
  • 839
  • 13
  • 20
  • Should it be page.className = " VisiblePage"; (instead of +=, use =) – hop Jan 26 '12 at 15:10
  • In which browser/s is this happening? Could you provide a fiddle example? – Fabrizio Calderan Jan 26 '12 at 15:12
  • This sounds a lot like the problems users are having with animating stuff on some browsers via CSS3. I want to say it has something to do with style updating, which means there isn't much we can do about it yet :| I could be wrong, however. – Jeffrey Sweeney Jan 26 '12 at 15:12
  • @hop Jeroen could be adding a class to an element that already has at least one class (that syntax threw me off too, but I'm pretty sure it's allowed). – Jeffrey Sweeney Jan 26 '12 at 15:13
  • hmm, seems to work here: http://jsfiddle.net/AtHNt/1/. Maybe that's just too much of an oversimplification. – Michael Jan 26 '12 at 15:22
  • @hop I am using += since there are already two other CSS classes assigned to the element. The final className after the += will be something like: "Page PageLeft VisiblePage" – Jeroen Jan 26 '12 at 15:32
  • @Jeffrey You're right about adding a class that already has a class. The += is just a string operator that seems to be perfectly allowed here. – Jeroen Jan 26 '12 at 15:36
  • @Fabrizio The browser I use is Chrome (v. 16.0.912) – Jeroen Jan 26 '12 at 15:36
  • what if you add `display: block` in your css `visiblePage` class instead of declaring it via javascript? – Fabrizio Calderan Jan 26 '12 at 15:53

1 Answers1

0

Following another question on stackoverflow and a blog post I conclude that CSS 3 transitions do not work (at least not in Chrome) when they are applied to elements that also have their CSS 'display' property set (at the same time). In my case the 'display' property of a 'page' element is set while that element also gets assigned a CSS class that defines a transition. Hence the transition does not work.

I have solved my problem by using the 'visibility' property instead of 'display'.

Community
  • 1
  • 1
Jeroen
  • 839
  • 13
  • 20