W3C home > Mailing lists > Public > www-style@w3.org > November 2012

Re: animate/transition height to/from auto

From: Alan Gresley <alan@css-class.com>
Date: Fri, 23 Nov 2012 22:40:04 +1100
Message-ID: <50AF6094.30600@css-class.com>
To: Michał Gołębiowski <m.goleb@gmail.com>
CC: Behrang Saeedzadeh <behrangsa@gmail.com>, W3C CSS Mailing List <www-style@w3.org>
On 23/11/2012 8:08 PM, Michał Gołębiowski wrote:
>>
>> On 22/11/2012 10:29 PM, Michał Gołębiowski wrote:
>>
>>> min-height won't work good enough because transitioning min-height
>>> transitions min-height, not height. If the 'auto' element height is 100px
>>> and you set min-height to 1000px, the visible part of transition
>>> (min-height from 0 to 100px) will be very short.
>>>
>>
>> I do not see the problem.
>
>
> Ah, sorry, I meant max-height, not min-height. I've seen this in many
> places: height set to auto and showing/hiding an element set using
> max-height: 0 and max-height: SOME_LARGE_VALUEpx; Transitioning max-height
> won't have a nice effect here.
>
>
>>   Anyway, why changing 'auto' to 0 and back can't trigger a transition? This
>>> is changing the computed value...
>>>
>>
>> I don't quite understand what you are saying here.
>
>
> 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?
>
> (Obviously changing height due to added content to an element of height:
> auto will exhibit a transitioning problem mentioned above, I'm not talking
> about it).

What you are not seeing is what triggers a transition and how long does 
a transition last for. Take this example using :hover.

<!DOCTYPE html>
<style type="text/css">
div { background: skyblue; padding: 1em;  }
div:hover {
     transition: all 2s linear;
     height: 200px;
}
</style>
<div>Content</div>

There is no transition. The change is instant. For this to grow from 
auto height, the height of the margin-box (and border-box, padding-box 
and content-box) must always be known for a transition to be consistent 
after firing. Such block-boxes may have line boxes wrapping or possibly 
may be overflowing. The variable of all descendant boxes (the whole 
nested chain) must also be known. All these variables must be kept 
updated and in some form of memory to show consistency. This become more 
complicated if any of what is the content is a percentage value. I would 
suspect it could be a huge performance hit but I am not an implementer.

Alan



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Friday, 23 November 2012 11:40:37 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:03 GMT