fix(runtime-dom): inconsistent behaviour on nested transition groups (#1531)

Author: Sergey Danilchenko

packages/runtime-dom/src/components/TransitionGroup.ts

@@ -132,7 +132,10 @@ const TransitionGroupImpl: ComponentOptions = {
             child,
             resolveTransitionHooks(child, cssTransitionProps, state, instance)
           )
-          positionMap.set(child, (child.el as Element).getBoundingClientRect())
+          positionMap.set(
+            child,
+            getRelativeBoundingClientRect(child.el as Element)
+          )
         }
       }
 
@@ -170,8 +173,21 @@ function callPendingCbs(c: VNode) {
   }
 }
 
+function getRelativeBoundingClientRect(el: Element) {
+  const elRect = el.getBoundingClientRect()
+  if (!el.parentElement) return elRect
+  const parentRect = el.parentElement.getBoundingClientRect()
+
+  return new DOMRectReadOnly(
+    elRect.x - parentRect.x,
+    elRect.y - parentRect.y,
+    elRect.width - parentRect.width,
+    elRect.height - parentRect.height
+  )
+}
+
 function recordPosition(c: VNode) {
-  newPositionMap.set(c, (c.el as Element).getBoundingClientRect())
+  newPositionMap.set(c, getRelativeBoundingClientRect(c.el as Element))
 }
 
 function applyTranslation(c: VNode): VNode | undefined {