Re: [css-grid] Are grid positions animatable?

On Thu, Nov 14, 2013 at 7:38 PM, Jon Rimmer <jon.rimmer@gmail.com> wrote:
> On 15 November 2013 02:27, Daniel Holbert <dholbert@mozilla.com> wrote:
>>
>> On 11/14/2013 05:45 PM, Jon Rimmer wrote:
>> > Hi all,
>> >
>> > Apologies if this has been asked before, but I'm wondering if the position
>> > of items in a grid layout are intended to be animatable? The properties in
>> > the spec do not specify one way or the other.
>>
>> I'd expect that the properties themselves are individually animatable,
>> where it makes sense. But their interpolated values won't produce any
>> sort of intermediate sliding around behavior like the demos that you
>> linked to.
>>
>> e.g. take "order" (a number, which impacts the grid position) for a
>> simple example. It can be transitioned between numeric values. But
>> intermediate "order" values don't produce intermediate overlaid grid
>> positions. At each instant in time, an "order" animation has a fixed
>> current value, which produces a particular ordering of the items.
>
> Hmm, I can see how that makes sense with how transitions works on most
> properties, but it will be a real shame if grid doesn't provide some
> mechanism for doing this. We have all this wonderful new machinery for
> laying out elements, but people will have fall back to doing
> everything with JS libraries, absolute positioning and transforms to
> get animation between positions? That doesn't seem right.
>
> What about adding a cross-fade-esque interpolation function to the
> grid placement properties? Something like "tween-position"? So could
> apply a transition on say, grid-row-start, and during a transition
> between say, 1 and 5,, the calculated value would be grid-row-start:
> tween-position(1, 5, 50%)?
>
> Or alternatively, a grid-transition property, that specifies an
> interpolation that applies to all grid items when they move to the
> positions determined by the layout algorithm?
>
> I don't know. Maybe these ideas are crazy, but I think it would suck
> not to have some way of doing this.
>
> Jon
>

I think that the solution of layout switch animation ought to be universal -
not just for grid layout. Animated switch from vertical flow layout to
horizontal flow
(flex boxes et al) may also be quite popular.

Here is what needs to be done to have that animation switch.

Let's assume that we have container Cont in layout A.
At some point of time the element gets new style that
defines another layout B and the transition takes
t period of time for completion.

Changes between A and B layout systems may contain:
1.  Change of visibility/display on some child elements;
2.  Change of computed location of children;
3.  Changes in other styles like colors, borders, dimensions, etc.

It is clear that transition of element locations between two [static] layout
systems requires some other layout schema (T) to be applied to the Cont for
the time of transition:  A -> T -> B

It is also desirable that transition T to be configurable on per element
basis. E..g. it should be possible to define different trajectories
for individual
children, etc. So we need some set of transitioning rules (Tr).

So in principle all this looks quite simple for the CSS engine:
a. Get list of states/locations of all children of Cont. in the state A.
b. switch the state of the Cont to be B.
c. Compute new states/locations of children in state B.
d. Set T to be flow/layout manager for the Cont for the time of transition.
e. animate the transition between A and B locations using Tr rules.

Here is an example of how this may look like in CSS for the markup:

<section state=A>
   <div>1</div>
   <div>2</div>
</section>

Initially it has vertical layout:

section[state=A] {
  flow: vertical;  /* some property that defines layout manager used:
                              default, vertical, horizontal, grid(), etc.  */
}

and we would like it to transition to

section[state=B] {
  flow: horizontal;  /* all blocks in a row */
}

We also would like elements to be moved on circular trajectory.
Lets define Tr rules as, for example, @morph at-block:

@morph circular {
     > * { /* each immediate child element is  */
              top: circ;  /* one quadrant of circle, see
http://javascript.info/files/tutorial/browser/animation/circ.png */
              left: cocirc; /* opposite function : 1-circ  */
           }
     > :first-child { color: red; transition: color linear;  }
     > :last-child { color: green; transition: color linear;  }
}

So if we would have single CSS property that defines layout method used then
we can assemble all this together as:

section[state=A] { flow:vertical; }
section[state=B] { flow:horizontal;  morph: circular 400ms; }

So if someone will do in script $("section").attr("state","B") then
we can observe elements changing places on  circular trajectories.

Quite easy I would say but requires single CSS property that defines layout
method used.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Friday, 15 November 2013 22:57:58 UTC