Re: [css3-transitions] starting and reversing animations

Tab Atkins Jr. wrote:
> On Thu, Jan 28, 2010 at 10:50 PM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>> Consider typical "folding element" case:
>>
>> div
>> {
>>  width:200px;
>>  height:16px;
>>  transition: width 1s linear,
>>              height 1s linear 1s;
>> }
>>
>> div:hover
>> {
>>  width:300px;
>>  height:100px;
>> }
>>
>>
>> So when the div gets :hover state it will expand its width in
>> 1st second and after that it will do expansion of its height in 2nd second.
>>
>> It is highly desirable that when element will loose the :hover state
>> to see the animation going in opposite direction - collapsing of height
>> first and collapsing of width next.
>>
>> It appears as css3-transitions document in its current state does not
>> support this kind of scenario.
> 
> It certainly does support such a thing, just not 'automatically'.  If
> you specify the reverse transition on the div:hover state, it will use
> that instead.

So you will have two transitions defined:

div { transition: 111 }
div:hover { transition: 222 }

Question is which value of the transition to use when the element 
changes its :hover state.

It appears that in your interpretation used value is the one that 
element had before changing the style and not the one that is defined
for the element in that state.

If it is so than it makes sense to define this somehow.

In any case this phrase

"If a running transition with duration T, executing so far for duration 
TE, from state A, to state B, is interrupted by a property change that 
would start a new transition"

somehow implies that value of the transition has immediate effect.

> 
> I don't think that, in general, there is a coherent notion of
> 'reverse' transitions.  Say that, in addition to the rules you had
> above, you have the following CSS:
> 
> div.one { height: 200px; }
> div.two { height: 300px; }
> 
> If you set the .one class programmatically, it should delay for 1s,
> then animate to 200px height over 1s.  Then say that you add .two
> programmatically.  It should also delay for 1s, then animate to 300px
> height over 1s.  Now what is a reverse transition?  If you remove
> ..two?  If you remove .two, and then remove .one?  If you remove both
> ..one and .two at the same time?

So we are speaking about the following style set:

div
{
   width:200px;
   height:16px;
}

div.one { height: 200px; }
div.two { height: 300px; }

div:hover
{
   width:300px;
   height:100px;
   transition: width 1s linear,
               height 1s linear 1s;
}


The way I see all this:

When @transition changes snapshot of used values and
attributes of just applied style is taken . These values are
used as start/end points for the transition.

On each animation step [ani-]calculated values are applied
on top of anything else including styles that you may set using
script. So these values are applied as if they have !very-important
modifier.

If to look on the problem that way then applying
.one class to the element programmatically will have
no effect until animation finishes.

Immediately after the end of animation element
will get its used height value from .one
or .two class (in your scenario) - using normal set of cascading rules.

I found this schema as simple, clear and predictable for authors.

If someone wants to apply styles during running animation then they
should define

div.one
{
   height:200px;
   transition: height 1s;
}

This will stop previous transition without reverting it and
start new one with current used value as a start point.

> 
> You're right that these all work the same way - it will delay for 1s,
> then animate to the new height over 1s.  If you want something to
> 'reverse', you can specify it explicitly on the second rule.  Frex,
> you can add to your :hover rule:
> 
> div:hover {
>   transition: width 1s linear 1s, height 1s linear;
> }
> 
> That way, once you're in the hover state, if you leave it the new,
> reversed transition rules will apply.
> 
> ~TJ
> 

It will be nice if it would be so easy.

Consider that you have, say, these two rules

div:hover { .... }
div:checked { .... }

and you want to define  different types of animations for
:normal -> :hover and
:normal -> :checked changes.

Following your logic it is not possible to define different animations 
for these two distinct paths. As used value for the transition
is not the one that defined inside :hover rule but the one that the 
element used to have. Am I correct in my understanding of your idea?

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Friday, 29 January 2010 07:11:24 UTC