Transition group gravity

[eli-crow]

Summary

Add a gravity prop to <transition-group> to prevent unintuitive "jumping" before -move transitions in lists whose items stack to the right or bottom. The prop would change the point on the ClientRect used to measure how far the item has moved. This is most salient when the child element changes in size.

Links

• Rendered RFC
• Discussion Thread
• Codesandbox with demo implementation

[posva]

I would say something along the lines of origin for the prop instead of gravity would make more sense given the possible values

[eli-crow]

I'm not opposed to that. I wonder, though, if that might be confused for transform-origin. Perhaps something more specific like position-origin or position-anchor?

Some other ideas:

• keep gravity, but use up, down, left and right instead of top, bottom, left, and right to imply motion and not measurement
• Or focus on behavior and call it something like stable-point
• direction

[Justineo]

I would say something along the lines of origin for the prop instead of gravity would make more sense given the possible values

I made a PR for Vue 2 before which added an origin prop for <transition-group> but for a different use case. See https://github.com/vuejs/vue/issues/8424 and https://github.com/vuejs/vue/pull/9430. I saw Evan marked that PR as a todo for v2.7 (it has been a long time so I’m not sure if it’s still the plan). Maybe we need more input for prop names for both use cases.