Skip to content

Commit

Permalink
Remove ghost from crossfade during scroll
Browse files Browse the repository at this point in the history
  • Loading branch information
sheijne committed Jan 30, 2020
1 parent 5076613 commit e135d19
Showing 1 changed file with 9 additions and 10 deletions.
19 changes: 9 additions & 10 deletions src/runtime/transition/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -204,21 +204,22 @@ interface CrossfadeParams {
easing: EasingFunction;
}

type ClientRectMap = Map<any, { rect: ClientRect }>;
type ElementMap = Map<any, { node: Element }>;

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;
Expand All @@ -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
Expand Down

0 comments on commit e135d19

Please sign in to comment.