Re: Transitioning top and bottom properties.

On 31/05/2011 5:09 PM, Maarten Billemont wrote:
>
> 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.


The point is that you're not transitioning from top: value to top: auto. 
You are transitioning from bottom: value to bottom: value. The thing 
that starts the transition is hover. This is the initial style for the 
jsfiddle example.

#element {
   top: 100%;
   bottom: auto;
}

Now when you hover, the style rules for #element are overridden by the 
specificity of #element:hover and the CSS values of the #element will be 
this.

#element {
   top: auto;
   bottom: 0;
}


Now here is your transition.

   bottom: 0  -------->  bottom: 0


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

Sorry, I gave the wrong values above. Anyway, If that is your answer, I 
can now presume that you are getting transition mixed up with animation. 
This will work.

#ap {
   margin-left: 100px;
   margin-right: auto;
   background: lime;
}
#ap:hover {
   -webkit-animation: move 5s infinite linear;
}
@-webkit-keyframes move {
	from {  margin-left: 100px; margin-right: auto; }
	to { margin-left: auto; margin-right: 100px; }
}

But again, auto is doing nothing special.


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

Transitions only change the values of a property. The don't swap between 
properties (neither does animations). I could give you an elegant 
solution to your use case but before I could, I would need to know what 
you are really seeking. I would never really know if you had no image to 
begin with and this is precisely where your use case stands.

As a side note. I usually give elegant solutions on CSS-discuss and not 
www-style.



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

Received on Tuesday, 31 May 2011 16:58:05 UTC