|
|
|
@ -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;
|
|
|
|
@ -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
|
|
|
|
|