Re: [css3-transitions] starting and reversing animations

Tab Atkins Jr. wrote:
> On Fri, Jan 29, 2010 at 1:11 AM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>> 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.
>>
...
>>
>> 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?
> 
> Correct - the transition property the element has *before* the change
> is what's used to run the transition.  So :normal->:hover and
> :normal->:checked run with the same transition function.  However, you
> can have :checked->:normal and :hover->normal use different
> transitions, since they start from different states.
> 
> Your proposal (gathering the transition property from the end-state)
> would allow different transitions starting from normal, but would
> require them to be the same returning to normal.
> 
> The two are equivalent, they just work oppositely.  The only way to
> get something that handles all this ideally is to have transitions
> that depend on *both* the start and end states, and that's not
> currently possible with the way the draft works.
> 

Seems like you did not get the idea. Let's try again:

 From you words (as the spec is not clear on that)
animation of these rules:

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

will be made this way:

:normal-state -> :hover = transition 111 (!)
:normal-state -> :checked = transition 111 (!)

:hover -> :normal-state = transition 222.
:checked -> :normal-state = transition 333.

( I have no idea where such peculiar transition
   table can be useful )

Idea that I am talking about is this:

For defining two distinct animations for the same element
you will need just this:

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

So
:normal-state -> :hover = transition 111
:normal-state -> :checked = transition 222

:hover -> :normal-state = transition 111 / reversed.
:checked -> :normal-state = transition 222 / reversed.

I think that my case is more, let's say, humanistic.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Friday, 29 January 2010 17:09:33 UTC