2

EDIT:

For those of you who don't seem to understand what I mean, I was able to find another question on the idea of a default/initial/natural display here.

In JavaScript, one can set the default display of an element by using the following code outline:

 whateverElement.style.display="";

If whateverElement's display was "none" when this code was run, it will now be whatever it would be naturally, according to the browser's default rendering.

If whateverElement was a DIV with no previous matched CSS rules that define its display, when it's JavaScript display property is set to "" (blank), its display would be defaulted to its natural, which is "block".

My problem is that I wish to use CSS3 animations by assigning a class to them through JavaScript, some animations that make it necessary to know the natural display of the element.

In Google Chrome Canary, I'm noticing that the display property "auto" is non-existent.

Is there another way in which I can create CSS3 animations where I set the display property to the "default" or "auto" display of an element?

Some examples...

 div{display:inline;} //all divs to be displayed "inline"
 div#specific{display:auto;} //#specific to be displayed BLOCK, disregarding the previous CSS rule.
Community
  • 1
  • 1
RickyAYoder
  • 963
  • 1
  • 13
  • 29
  • CSS3 animations and the `display` property don't work too good. Check http://stackoverflow.com/questions/3331353/transitions-on-the-display-property – elclanrs Aug 31 '13 at 22:40
  • 1
    But aren't transitions and animations two different things? – RickyAYoder Aug 31 '13 at 22:41
  • Display can't be set to auto, the list of valid values is in the [CSS spec](http://www.w3.org/wiki/CSS/Properties/display): `inline | block | list-item | run-in | inline-block | table-... | none | inherit`. Could you post more examples of code which doesn't work? It will make it easier to see what you are trying to do. – Douglas Aug 31 '13 at 22:45
  • But then again, I also see how setting the opacity and height to "0" could help in things such as toggling, fade toggling, fadeIns, and fadeOuts, etc. – RickyAYoder Aug 31 '13 at 22:45
  • Douglas-There is no working code I have made yet. What I'm trying to do is toggle elements with fancy effects, while keeping the normal display property when elements are shown through CSS instead of JavaScript. – RickyAYoder Aug 31 '13 at 22:47
  • I think it applies to animations as well. Also FF and Chrome implement `display: initial` with prefix probably. – elclanrs Aug 31 '13 at 22:49
  • Huh. I thought there was an "auto" value for display, but I guess not. I can look into "initial", however. – RickyAYoder Aug 31 '13 at 22:51
  • Maybe change the first selector to say something like `div:not(#specific){display:inline}`? – asontu Aug 31 '13 at 23:03
  • Yes, but I don't want to have to do that with every element I want to toggle. I want something dynamic. – RickyAYoder Aug 31 '13 at 23:07
  • That's a really unclear title, can you choose a better one? – user229044 Sep 02 '13 at 02:59
  • megear-I don't see what's so hard about it. You know how you can do ELEMENT.style.display='' <-NOTHING in JavaScript? How can I do it in CSS? – RickyAYoder Sep 02 '13 at 12:00
  • When you set an element's display property to NOTHING in JavaScript, it's computed display is used. – RickyAYoder Sep 02 '13 at 12:21

2 Answers2

2

You cannot transition the display property. What would it mean anyway? Perhaps you want to transition the opacity property. You can transition the visibility property, but since it's a yes-or-no affair, it simply turns visibility on or off at the end of the transition period.

For what you're trying to do, transitioning max-width or max-height or both might do the trick nicely.

  • Yeah, but I should be able to. This mess with defining the correct display has to stop for website developing--it would really help with web GUIs if I could transition the display property PROPERLY in just plain CSS, instead of having to revert to JavaScript to copy the element to a blank document in an iframe to get it's default display. From what I understand, display:initial is the closet fix using just CSS. – RickyAYoder Sep 02 '13 at 12:13
  • And using opacity only goes so far. If I have 2 block elements (say forms), and I "hide" the 1st one using opacity, there will still be that empty space above the 2nd element because the element's display is still "block". – RickyAYoder Sep 02 '13 at 12:18
0

did you mean display:unset? It work in both firefox and Chrome

Dita Aji Pratama
  • 710
  • 1
  • 12
  • 28