Re: Transitioning top and bottom properties.

On May 31, 2011, at 10:46 AM, Alan Gresley <alan@css-class.com> wrote:

> I would appreciate seeing use cases with width, height, etc with auto.

Here's one. I have an element with a child div that is meant to be revealed upon hovering. That child contains one or more paragraphs of unkown length. I want the child div to have overflow:hidden, and to grow from 'height:0' to 'height:auto' in 2 seconds, so that as it grows it reveals more content until it is all revealed in exactly 2 seconds. The effect would be somewhat similar to opening a folder in iOS, but with more variation in height. 

Here's variation on that: Same as the first, but instead of paragraphs it is a couple of variable-width links inside a 'width:auto; display:inline-block, height.2em' span with some padding, borders, background, etc. And I want to transition from width:0 to width:auto. 

Further, I want the above to be absolutely positioned, and to also slide to the right from wherever it exists within the line, with a transition from 'left:auto; margin-left:0;' to 'left:100%; margin-left:1em;'. 

Received on Tuesday, 31 May 2011 19:54:27 UTC