crossfade() — svelte Function Reference

Architecture documentation for the crossfade() function in index.js from the svelte codebase.

Function javascript AnimationLibrary Transitions calls 2

Entity Profile

AnimationLibrary→ Transitions→ crossfade() — svelte Function Reference

Dependency Diagram

graph TD
  4514c186_c690_d916_c504_fca730b3f4ce["crossfade()"]
  8795a504_2189_bf07_fb96_096bc8c92d25["index.js"]
  4514c186_c690_d916_c504_fca730b3f4ce -->|defined in| 8795a504_2189_bf07_fb96_096bc8c92d25
  499df9d0_6d12_efb5_c251_39c1bd30b089["assign()"]
  4514c186_c690_d916_c504_fca730b3f4ce -->|calls| 499df9d0_6d12_efb5_c251_39c1bd30b089
  c9f56dd5_0c46_3ac0_796e_a7f2fd0a79d2["scale()"]
  4514c186_c690_d916_c504_fca730b3f4ce -->|calls| c9f56dd5_0c46_3ac0_796e_a7f2fd0a79d2
  style 4514c186_c690_d916_c504_fca730b3f4ce fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/transition/index.js lines 233–300

export function crossfade({ fallback, ...defaults }) {
	/** @type {Map<any, Element>} */
	const to_receive = new Map();
	/** @type {Map<any, Element>} */
	const to_send = new Map();

	/**
	 * @param {Element} from_node
	 * @param {Element} node
	 * @param {CrossfadeParams} params
	 * @returns {TransitionConfig}
	 */
	function crossfade(from_node, node, params) {
		const {
			delay = 0,
			duration = /** @param {number} d */ (d) => Math.sqrt(d) * 30,
			easing = cubic_out
		} = 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;
		const dw = from.width / to.width;
		const dh = from.height / to.height;
		const d = Math.sqrt(dx * dx + dy * dy);
		const style = getComputedStyle(node);
		const transform = style.transform === 'none' ? '' : style.transform;
		const opacity = +style.opacity;
		return {
			delay,
			duration: typeof duration === 'function' ? duration(d) : duration,
			easing,
			css: (t, u) => `
			   opacity: ${t * opacity};
			   transform-origin: top left;
			   transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${
						t + (1 - t) * dh
					});
		   `
		};
	}

	/**
	 * @param {Map<any, Element>} items
	 * @param {Map<any, Element>} counterparts
	 * @param {boolean} intro
	 * @returns {(node: any, params: CrossfadeParams & { key: any; }) => () => TransitionConfig}
	 */
	function transition(items, counterparts, intro) {
		// @ts-expect-error TODO improve typings (are the public types wrong?)
		return (node, params) => {
			items.set(params.key, node);
			return () => {
				if (counterparts.has(params.key)) {
					const other_node = counterparts.get(params.key);
					counterparts.delete(params.key);
					return crossfade(/** @type {Element} */ (other_node), node, params);
				}
				// if the node is disappearing altogether
				// (i.e. wasn't claimed by the other list)
				// then we need to supply an outro
				items.delete(params.key);
				return fallback && fallback(node, params, intro);
			};
		};
	}
	return [transition(to_send, to_receive, false), transition(to_receive, to_send, true)];
}