Closed Bug 1259760 Opened 4 years ago Closed 4 years ago
Animate/transition the 'order' property in CSS grid item placement
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?
(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.
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.
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
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.