Fwd: Re: Transitioning top and bottom properties.

Forwarding this to the www-style. Not sure how www-style-request was 
inserted.

-------- Original Message --------
Subject: Re: Transitioning top and bottom properties.
Date: Mon, 30 May 2011 09:41:31 +0200
From: Maarten Billemont <lhunath@gmail.com>
To: Alan Gresley <alan@css-class.com>
CC: www-style-request@w3.org


On 30 May 2011, at 08:34, Alan Gresley wrote:

> On 29/05/2011 7:41 AM, Maarten Billemont wrote:
>> Consider the following test case: http://jsfiddle.net/An6vn/3/
>>
>> Here, the point is to have a container of set size (eg. an image)
>> with a caption attached to the bottom of it. The caption would have a
>> single line that provides the name of the image, after which a
>> paragraph of description could follow. The case demonstrates a style
>> where only the first line is visible by default and the rest appears
>> on hover, by means of transitioning from top:100%; margin-top:-1em;
>> ->  top:auto; bottom:0;
>>
>> Without transitioning, this works very well.  Add CSS transitioning
>> and Chrome transitions the top to 0 (moving the caption all the way
>> to the top), after which the caption suddenly appears on the very
>> bottom (applying bottom:0). Firefox refuses to transition to auto, at
>> all.
>>
>> I would expect that each would determine the begin and end y-position
>> of the caption relative to its parent in each instance and transition
>> from one to the other.  Unfortunately, this isn't how it works.
>>
>> Any input?
>
>
> Yes. You can not get a transition to work with those offsets. You either have to choose either top offset or bottom offset, not both. Currently you are attempting these transitions.
>
>
>  top:100%      ----->     top: auto
>
>  bottom: auto  ----->     bottom: 0
>
>
> They will never work since auto offset really mean _no offset_.

So, in essence, the problem here is that transitioning performs an 
easing algorithm on CSS properties, rather than on the net effect of 
those properties.

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.

>
> 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?  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.

>
> <!doctype html>
>
> <style type="text/css">
> .image {
>    position: relative;
>    width: 200px;
>    height: 200px;
>    overflow: hidden;
>    border: 1px solid green;
>    background: rgba(127, 255, 0, 0.5);
> }
> .description {
>    position: absolute;
>    bottom:-8em;
>    width: 196px;
>    border: 2px solid blue;
>    background: rgba(0, 0, 255, 0.1);
>    -webkit-transition: all 0.2s ease-in-out;
>    -moz-transition: all 0.2s ease-in-out;
>    -o-transition: all 0.2s ease-in-out;
>    -ms-transition: all 0.2s ease-in-out;
>    transition: all 0.2s ease-in-out;
> }
> .image:hover .description {
>    bottom: 0;
> }
> </style>
>
> <div class="image">
>    <div class="description">
>        An image.
>
>        <p>This image is merely a CSS test.</p>
>
>        <p>This image is merely a CSS test.</p>
>    </div>
> </div>
>
>
>
> --
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/

Received on Monday, 30 May 2011 07:49:25 UTC