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.