Version

2.6.11

Reproduction link

https://codesandbox.io/s/smoosh-worker-kx6vo

Steps to reproduce

Run the demo and click the buttons for the 2D / 3D and normal (red) and patched (green) versions of the list.

What is expected?

The items in the 3D transformed list (red) should transition smoothly from the start to the end position.

What is actually happening?

The transition is extremely wonky!

Transition Group uses getBoundingClientRect() to get the relative transforms of the transition items. Unfortunately, this uses document space, not the local (parent) space, which gives the wrong result for a transition when transformed:

Fix

Using a simple getOffsetPosition() function allows the transition to get the correct transformation values:

function getOffsetPosition (el) {
  return {
    left: el.offsetLeft,
    top: el.offsetTop
  }
}