Re: [css3-transitions] starting and reversing animations

Simon Fraser wrote:
> On Jan 29, 2010, at 9:55 pm, Andrew Fedoniouk wrote:
> 
>> Simon Fraser wrote:
>>> On Jan 29, 2010, at 7:30 pm, Andrew Fedoniouk wrote:
>>>> In most cases it is enough to run animation in opposite direction so is
>>>> my original posting on the subject.
>>>>
>>>> In current spec we have rollback mode for non-finished transition but
>>>> no rollback method for finished transition. System is not complete.
>>> The system may not be complete (what system ever is?), but it provides
>>> a simple, easy-to-use method of doing 90% of the transitions that authors
>>> need. I suspect that the other 10% could be done with a little bit of JavaScript.
>> Actually my message was based on practical use case that I've got from
>> UI designers testing the feature. Practically as the very first comment/request.
> 
> If you can give concrete examples of designs that require this behavior, that
> would be very informative. For now, I don't see that the added engine and authoring
> complexity of supporting something like this being worthwhile.
> 

The DIV element has four distinct states:
1. normal
2. hover
3. expanded
3. expanded hover

It is required to have two animated transitions:

a. normal-hover and hover-normal - "jump out"
b. normal-expanded and expanded-normal - "folding"

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

div:hover
{
   position: relative;
   left:-5px;
   top:-5px;
   width:110px;
   height:26px;
   transition: all ease-in 0.5s; /* transition A-B "jump out" */
}

div.expanded
{
   width:210px;
   height:126px;
   transition: width ease-out 1s,
               height ease-in 1s 1s; /* transition C-D "folding" */
}
div.expanded:hover
{
   position: relative;
   left:-5px;
   top:-5px;
   width:220px;
   height:136px;
}

Where "folding" makes real sense when it is used in both directions.
And transition :hover -> :normal has to be symmetric in both
animation directions too.

I suspect that it is not possible to define
this pretty simple schema in proposed model.

AFAIR I saw such transitions on Mac UI in couple of places.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Saturday, 30 January 2010 07:32:18 UTC