Re: animate/transition height to/from auto

On Fri, Nov 23, 2012 at 6:31 AM, Boris Zbarsky <bzbarsky@mit.edu> wrote:

> On 11/23/12 4:08 AM, Michał Gołębiowski wrote:
>
>> I meant changing height between 0 and auto. Their computed values are 0
>> and auto, respectively, so this value changes. Why can't this be handled
>> by transitions? What am I not seeing here?
>>
>
> Generally speaking, transitions perform interpolation on computed values
> right now.  So when the computed value changes from X to Y a transition
> needs to be able to figure out a computed value s*X + (1-s)*Y for all 0 <=
> s <= 1.
>
> The problem is how to do this for 0 and "auto".  What's halfway between
> the two?  For example, consider this testcase:
>
>   <div id="outer" style="height: 0; overflow: hidden">
>     <div id="middle" style="height: 50%">
>       <div id="inner" style="height: 100px"></div>
>     </div>
>   </div>
>
> The height of the outer div is 0, as is that of the middle div.
>
> If the outer div had auto height, its height would be 100px, at which
> point the height of the middle div would also be 100px (because 50% of auto
> computes to auto).
>
> What should happen halfway through a transition from 0 to auto for the
> height of the outer div?  Presumably the height of the outer div should be
> 50px?  What should the height of the middle div be: 50px or 25px, and why?


I think the transition should happen with computed values.
So, at 50% the height of 'outer' is 50px, so 'middle' should be '25px'.

When the transition is over, 'middle' will jump to become 100px.