1259760 - Animate/transition the 'order' property in CSS grid item placement

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Sample HTML

According to https://developer.mozilla.org/en-US/docs/Web/CSS/order, the order property is animatable, yet when I change the CSS `order` property of a grid item, which has `transition: all 2s`, I don't see any transition, just a jump from one area in the grid to another.

I've attached my sample HTML to demonstrate this.

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

I should have noted however that 'order' doesn't appear in the list of animatable properties at https://www.w3.org/TR/css3-transitions/#animatable-properties. Perhaps this was added by a different spec or MDN erroneously says it is animatable?

Comment 2

[Mats Palmgren (inactive)]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #1)
> I should have noted however that 'order' doesn't appear in the list of
> animatable properties at
> https://www.w3.org/TR/css3-transitions/#animatable-properties. Perhaps this
> was added by a different spec or MDN erroneously says it is animatable?

That's just the list of CSS *2* properties that are animatable.
In later specs each property says if it's animatable or not.
The MDN page points to the relevant CSS spec, Flexbox in this case which says 'order'
is animatable:
https://drafts.csswg.org/css-flexbox-1/#order-property

So the MDN page is correct.

Comment 3

[Mats Palmgren (inactive)]

Attachment: testcase

The problem is that your test doesn't specify any 'order' on the items
so they all have '0' as the value, so if you set one item to have say
order:10 then it will immediately (at order:1) be displayed last and
then it stays last for all the remaining values.

So here's a better testcase to show that it works as expected
(the animation starts in onload so you don't need to do anything).
I've slowed it down to 10 seconds to make it easier to see how
the animated item moves.

Comment 4

[Jared Wein [:jaws] (please needinfo? me)]

Thanks for the correction. Are there plans to interpolate the movement of grid items? In your updated testcase, the item jumps from area to area but it would be nice if we could animate it's movement instead of stepping it.

Comment 5

[Mats Palmgren (inactive)]

Nope, I have no such plans.  Unless we already have a framework for doing such things.

If you want something like this you should talk to dbaron.

(I'm resolving this bug as invalid since the 'order' animation is already working
as expected.  I think what you're asking for is something outside of Grid.)