Closed Bug 1259760 Opened 4 years ago Closed 4 years ago

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

Categories

(Core :: Layout, defect)

defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: jaws, Unassigned)

References

Details

(Keywords: DevAdvocacy)

Attachments

(1 file, 1 obsolete file)

Attached file Sample HTML (obsolete) —
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)
Attached file 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
Closed: 4 years ago
Flags: needinfo?(mats)
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.