Re: [css3-flexbox] flex() and CSS transitions

On Tue, Oct 11, 2011 at 6:11 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> On Thu, Oct 6, 2011 at 4:51 PM, Tony Chang <tony@chromium.org> wrote:
> > What should happen if we try to use a CSS transition between two
> different
> > flex() values?
> > I made a small demo in javascript that scales each value independently
> (pos
> > flex -> pos flex, neg flex -> neg flex, preferred size -> preferred size)
> > and it seems to behave reasonably.  I just wanted to make sure this is
> > something we want to support.
>
> For transitioning between flexible values, yeah, just transitioning
> the components individually seems likely fine.
>
> Could you share your demo?


http://ponderer.org/tests/flex-transition.html
It only works if you build webkit with --css3-flexbox.


> > Also, it seems like transitioning from a fixed length to a flex() value
> > should just treat the fixed length as flex(0 0 [fixed length]).  Does
> that
> > seem reasonable as well?
>
> I think this works, except for the case where all the items are
> inflexible and then transition to being flexible.  They'll suddenly
> jump in size as soon as their flex becomes non-zero.
>

You're right, that's jumpy.


> We could possibly fix this by adopting something similar to the
> behavior of Andrew Fedoniouk's %% unit, where if the sum of all the
> flex values in the line is less than 1, it resolves to a percentage of
> the free space instead.  Put another way, the flex value would specify
> what fraction of the free space it wants, normalized so that they sum
> to 1 *only* if the sum is greater than 1.  (Presumably the same would
> apply to neg-flex?)


I'm not sure it's worth the added complexity.  The current behavior isn't
smooth, but it seems reasonable given what the web developer is asking for.

Received on Wednesday, 12 October 2011 16:22:11 UTC