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

RESOLVED INVALID

Status

()

RESOLVED INVALID
3 years ago
3 years ago

People

(Reporter: jaws, Unassigned)

Tracking

({DevAdvocacy})

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment, 1 obsolete attachment)

Created attachment 8734763 [details]
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.
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?
Flags: needinfo?(mats)
(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.
Flags: needinfo?(mats)
Created attachment 8734793 [details]
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.
Attachment #8734763 - Attachment is obsolete: true
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.
Flags: needinfo?(mats)
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.)
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Flags: needinfo?(mats)
Resolution: --- → INVALID
Keywords: DevAdvocacy
You need to log in before you can comment on or make changes to this bug.