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.
Improve this question
12
  • CSS3 animations and the display property don't work too good. Check stackoverflow.com/questions/3331353/… Commented Aug 31, 2013 at 22:40
  • 1
    But aren't transitions and animations two different things? Commented Aug 31, 2013 at 22:41
  • Display can't be set to auto, the list of valid values is in the CSS spec: 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. Commented Aug 31, 2013 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. Commented Aug 31, 2013 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. Commented Aug 31, 2013 at 22:47

2 Answers 2

Reset to default
1

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.

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

2 Comments

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

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.