Re: Transitioning top and bottom properties.

On 30 May 2011, at 12:33, Alan Gresley wrote:

> On 29/05/2011 7:41 AM, Maarten Billemont wrote:
> 
>> As a result, transitioning from/to auto values becomes impossible.
>> Which
>> is, IMO, a huge lacking that will become all the more clear and painful
>> as the standard gets applied throughout.
>> 
>> I do hope I'm actually overlooking something.
> 
> You are overlooking something. Let's explain this a different way. You have one element with position: absolute. Let's say that when we give an element this style, it magically also gets these styles, 'left: auto, top: auto, bottom: auto and bottom: auto'.
> 
> Now implementations do not do anything with auto apart from use it as the final computed style where it is appropriate to do so. Since your use case is in horizontal writing mode with LTR inline direction, the only values that are needed to be calculated are left: auto and top: auto. These are computed as left: 0 and top: 0. This is the same x (left) and y (top) position it would have had if the element was position: static.

I understand that.  I'm afraid I don't yet see where transitions come into play, or the point you're trying to make.

> 
>>> Here is how it can be done.
>> 
>> The problem with this approach is that it hardcodes the height of the
>> caption into the style (your bottom:-8em). Which means that anything
>> that would cause the height of the caption to change from that
>> hard-coded value (different properties getting applied, non-static
>> content, etc.) would break this method. The code in the jsfiddle paste
>> linked above works regardless of what the caption's height is, albeit
>> without transitioning correctly between states.
>> 
>> Is there a reason why it was determined that transitioning should be
>> applied to property values rather than their effect on the element?
> 
> Would you expect that the below would work with transition?
> 
>  margin-left: 100px -----> margin-left: auto
>  margin-left: auto  -----> margin-left: 100px

Certainly.  I'd expect that the box would be calculated twice, once before and once after, and that the user agent would transition between both boxes.

>> I'd
>> much rather see the example in the jsfiddle paste attempt these
>> transitions:
>> 
>> before: top: 100%; botom: auto; margin-top: -1em; => element.x = 200px -
>> 1em =~ 180px
>> after : top: auto; botom: 0; => element.x = 200px - element.height =~ 140px
>> 
>> transition: element.x: 180px -> 140px
>> 
>> Consider also that, when you style an element, you apply properties with
>> the net effect in mind. Similarly, when you transition, you do so
>> intuitively expecting to transition from net effect A to net effect B.
> 
> You are wanting CSS to do that?

Isn't that the whole point of CSS, and more specifically, its transitions module?

> Since you are using JS already, why don't you just query the ComputedStyle height and use the value returned as the value for the top offset. I can only give you part of the solution (I still need to learn more JS and jQuery).

I'm not actually using JS, and I'd rather not fall back to the old way of doing style with JS code rather than declaratively though CSS.

Received on Tuesday, 31 May 2011 07:10:23 UTC