Re: Transitioning top and bottom properties.

On 30/05/2011 5:48 PM, Alan Gresley wrote:

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

No, the transition only affects _one property_. You have two properties 
which are top and bottom.


> As a result, transitioning from/to auto values becomes impossible.

Yes. This is what I trying to tell you.


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


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


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

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



<!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: -152px; /* 2px + 148px + 2px  for FF with default text size 
of 16px */
     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 id="output"></div>

<div class="image">
     <div id="description">
         An image.

         <p>This image is merely a CSS test.</p>

         <p>This image is merely a CSS test.</p>
     </div>
</div>

<script>
   function getTheStyle(){
   var elem= document.getElementById("description");
   var theCSSprop= 
window.getComputedStyle(elem,null).getPropertyValue("height");
   document.getElementById("output").innerHTML= theCSSprop;
   }
   getTheStyle();
</script>



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Monday, 30 May 2011 10:34:00 UTC