From e135d19e79195f13ee5ef4925aad856020eb8d1e Mon Sep 17 00:00:00 2001 From: Sibbe Heijne Date: Thu, 30 Jan 2020 17:15:29 +0100 Subject: [PATCH] Remove ghost from crossfade during scroll Fixes: https://github.com/sveltejs/svelte/issues/4111 --- src/runtime/transition/index.ts | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/runtime/transition/index.ts b/src/runtime/transition/index.ts index 0a20c81b1f83..034d95b31f98 100644 --- a/src/runtime/transition/index.ts +++ b/src/runtime/transition/index.ts @@ -204,21 +204,22 @@ interface CrossfadeParams { easing: EasingFunction; } -type ClientRectMap = Map; +type ElementMap = Map; export function crossfade({ fallback, ...defaults }: CrossfadeParams & { fallback: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig; }) { - const to_receive: ClientRectMap = new Map(); - const to_send: ClientRectMap = new Map(); + const to_receive: ElementMap = new Map(); + const to_send: ElementMap = new Map(); - function crossfade(from: ClientRect, node: Element, params: CrossfadeParams): TransitionConfig { + function crossfade(from_node: Element, node: Element, params: CrossfadeParams): TransitionConfig { const { delay = 0, duration = d => Math.sqrt(d) * 30, easing = cubicOut } = assign(assign({}, defaults), params); + const from = from_node.getBoundingClientRect(); const to = node.getBoundingClientRect(); const dx = from.left - to.left; const dy = from.top - to.top; @@ -242,18 +243,16 @@ export function crossfade({ fallback, ...defaults }: CrossfadeParams & { }; } - function transition(items: ClientRectMap, counterparts: ClientRectMap, intro: boolean) { + function transition(items: ElementMap, counterparts: ElementMap, intro: boolean) { return (node: Element, params: CrossfadeParams & { key: any }) => { - items.set(params.key, { - rect: node.getBoundingClientRect() - }); + items.set(params.key, { node }); return () => { if (counterparts.has(params.key)) { - const { rect } = counterparts.get(params.key); + const from_node = counterparts.get(params.key).node; counterparts.delete(params.key); - return crossfade(rect, node, params); + return crossfade(from_node, node, params); } // if the node is disappearing altogether