From b6bee0e5177bfe18d57467a0868e886a275dab82 Mon Sep 17 00:00:00 2001 From: chentao Date: Tue, 14 Jun 2022 09:02:54 +0800 Subject: [PATCH 1/5] fix(runtime-dom): avoid transform affect flip animation #6105 --- .../runtime-dom/src/components/TransitionGroup.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts index 5c78be26d72..2957f1c8256 100644 --- a/packages/runtime-dom/src/components/TransitionGroup.ts +++ b/packages/runtime-dom/src/components/TransitionGroup.ts @@ -27,8 +27,13 @@ import { } from '@vue/runtime-core' import { extend } from '@vue/shared' -const positionMap = new WeakMap() -const newPositionMap = new WeakMap() +interface Position { + top: number + left: number +} + +const positionMap = new WeakMap() +const newPositionMap = new WeakMap() export type TransitionGroupProps = Omit & { tag?: string @@ -132,7 +137,7 @@ const TransitionGroupImpl: ComponentOptions = { child, resolveTransitionHooks(child, cssTransitionProps, state, instance) ) - positionMap.set(child, (child.el as Element).getBoundingClientRect()) + positionMap.set(child, { left: (child.el as HTMLElement).offsetLeft, top: (child.el as HTMLElement).offsetTop }) } } @@ -171,7 +176,7 @@ function callPendingCbs(c: VNode) { } function recordPosition(c: VNode) { - newPositionMap.set(c, (c.el as Element).getBoundingClientRect()) + newPositionMap.set(c, { left: (c.el as HTMLElement).offsetLeft, top: (c.el as HTMLElement).offsetTop }) } function applyTranslation(c: VNode): VNode | undefined { From 2a2022fde1379413db08c10027df11a138033e77 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 2 Sep 2024 03:51:06 +0000 Subject: [PATCH 2/5] [autofix.ci] apply automated fixes --- packages/runtime-dom/src/components/TransitionGroup.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts index 9d7bfab9eb2..d45cca42daf 100644 --- a/packages/runtime-dom/src/components/TransitionGroup.ts +++ b/packages/runtime-dom/src/components/TransitionGroup.ts @@ -190,7 +190,10 @@ function callPendingCbs(c: VNode) { } function recordPosition(c: VNode) { - newPositionMap.set(c, { left: (c.el as HTMLElement).offsetLeft, top: (c.el as HTMLElement).offsetTop }) + newPositionMap.set(c, { + left: (c.el as HTMLElement).offsetLeft, + top: (c.el as HTMLElement).offsetTop, + }) } function applyTranslation(c: VNode): VNode | undefined { From d8219f58b87196c1d7cb42e6f8a41b11144c0d47 Mon Sep 17 00:00:00 2001 From: daiwei Date: Mon, 2 Sep 2024 11:59:47 +0800 Subject: [PATCH 3/5] chore: minor tweaks --- packages/runtime-dom/src/components/TransitionGroup.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts index d45cca42daf..4939fd8bd47 100644 --- a/packages/runtime-dom/src/components/TransitionGroup.ts +++ b/packages/runtime-dom/src/components/TransitionGroup.ts @@ -133,10 +133,10 @@ const TransitionGroupImpl: ComponentOptions = { instance, ), ) - positionMap.set( - child, - (child.el as Element).getBoundingClientRect(), - ) + positionMap.set(child, { + left: (child.el as HTMLElement).offsetLeft, + top: (child.el as HTMLElement).offsetTop, + }) } } } From 10ded57d26cb2742704d69adbae5bb46dd2ee311 Mon Sep 17 00:00:00 2001 From: daiwei Date: Mon, 2 Sep 2024 14:38:37 +0800 Subject: [PATCH 4/5] test: add e2e test for TransitionGroup with scale re-use test case from 9733 --- .../vue/__tests__/e2e/TransitionGroup.spec.ts | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts index da3f4a42de9..11ffcc02f02 100644 --- a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts +++ b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts @@ -630,4 +630,60 @@ describe('e2e: TransitionGroup', () => { }, E2E_TIMEOUT, ) + + // #6105 + test( + 'with scale', + async () => { + await page().evaluate(() => { + const { createApp, ref, onMounted } = (window as any).Vue + createApp({ + template: ` +
+
+ +
  • {{item}}
    • +     + +
    +
    + `, + setup: () => { + const items = ref(['a', 'b', 'c']) + const click = () => { + items.value.reverse() + } + + onMounted(() => { + const styleNode = document.createElement('style') + styleNode.innerHTML = `.v-move { + transition: transform 0.5s ease; + }` + document.body.appendChild(styleNode) + }) + + return { items, click } + }, + }).mount('#app') + }) + + const original_top = await page().$eval('ul li:nth-child(1)', node => { + return node.getBoundingClientRect().top + }) + const new_top = await page().evaluate(() => { + const el = document.querySelector('ul li:nth-child(1)') + const p = new Promise(resolve => { + el!.addEventListener('transitionstart', () => { + const new_top = el!.getBoundingClientRect().top + resolve(new_top) + }) + }) + ;(document.querySelector('#toggleBtn') as any)!.click() + return p + }) + + expect(original_top).toBeLessThan(new_top as number) + }, + E2E_TIMEOUT, + ) }) From 063e8e79e6e7d187b129cb6754612d96e754cdf7 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 15 Oct 2025 01:23:25 +0000 Subject: [PATCH 5/5] [autofix.ci] apply automated fixes --- packages/vue/__tests__/e2e/TransitionGroup.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts index a1fe656875c..09f137b4c2f 100644 --- a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts +++ b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts @@ -701,7 +701,7 @@ describe('e2e: TransitionGroup', () => { }, E2E_TIMEOUT, ) - + test( 'not leaking after children unmounted', async () => {