fix: compute rect directly before crossfading (#8314)

closes #4344
fixes #4111
pull/8326/head
Simon H 2 years ago committed by GitHub
parent e5b0b6235d
commit 0bdb59c2e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -211,7 +211,7 @@ export interface CrossfadeParams {
easing?: EasingFunction; easing?: EasingFunction;
} }
type ClientRectMap = Map<any, { rect: ClientRect }>; type ClientRectMap = Map<any, Element>;
export function crossfade({ fallback, ...defaults }: CrossfadeParams & { export function crossfade({ fallback, ...defaults }: CrossfadeParams & {
fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig; fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;
@ -232,13 +232,14 @@ export function crossfade({ fallback, ...defaults }: CrossfadeParams & {
const to_receive: ClientRectMap = new Map(); const to_receive: ClientRectMap = new Map();
const to_send: ClientRectMap = new Map(); const to_send: ClientRectMap = new Map();
function crossfade(from: ClientRect, node: Element, params: CrossfadeParams): TransitionConfig { function crossfade(from_node: Element, node: Element, params: CrossfadeParams): TransitionConfig {
const { const {
delay = 0, delay = 0,
duration = d => Math.sqrt(d) * 30, duration = d => Math.sqrt(d) * 30,
easing = cubicOut easing = cubicOut
} = assign(assign({}, defaults), params); } = assign(assign({}, defaults), params);
const from = from_node.getBoundingClientRect();
const to = node.getBoundingClientRect(); const to = node.getBoundingClientRect();
const dx = from.left - to.left; const dx = from.left - to.left;
const dy = from.top - to.top; const dy = from.top - to.top;
@ -264,16 +265,14 @@ export function crossfade({ fallback, ...defaults }: CrossfadeParams & {
function transition(items: ClientRectMap, counterparts: ClientRectMap, intro: boolean) { function transition(items: ClientRectMap, counterparts: ClientRectMap, intro: boolean) {
return (node: Element, params: CrossfadeParams & { key: any }) => { return (node: Element, params: CrossfadeParams & { key: any }) => {
items.set(params.key, { items.set(params.key, node);
rect: node.getBoundingClientRect()
});
return () => { return () => {
if (counterparts.has(params.key)) { if (counterparts.has(params.key)) {
const { rect } = counterparts.get(params.key); const other_node = counterparts.get(params.key);
counterparts.delete(params.key); counterparts.delete(params.key);
return crossfade(rect, node, params); return crossfade(other_node, node, params);
} }
// if the node is disappearing altogether // if the node is disappearing altogether

Loading…
Cancel
Save