animation() — svelte Function Reference

Architecture documentation for the animation() function in transitions.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 1

Entity Profile

ClientRuntime→ Hydration→ animation() — svelte Function Reference

Dependency Diagram

graph TD
  ad39f2bb_e258_bd5a_b2ab_4d60ed2d92f6["animation()"]
  e29c417d_6c26_6125_97f5_600e95e02dac["transitions.js"]
  ad39f2bb_e258_bd5a_b2ab_4d60ed2d92f6 -->|defined in| e29c417d_6c26_6125_97f5_600e95e02dac
  df0bba2e_5fd6_624d_e576_6c964cadc587["animate()"]
  ad39f2bb_e258_bd5a_b2ab_4d60ed2d92f6 -->|calls| df0bba2e_5fd6_624d_e576_6c964cadc587
  style ad39f2bb_e258_bd5a_b2ab_4d60ed2d92f6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/elements/transitions.js lines 84–173

export function animation(element, get_fn, get_params) {
	var effect = animation_effect_override ?? /** @type {Effect} */ (active_effect);
	var nodes = /** @type {EffectNodes} */ (effect.nodes);

	/** @type {DOMRect} */
	var from;

	/** @type {DOMRect} */
	var to;

	/** @type {Animation | undefined} */
	var animation;

	/** @type {null | { position: string, width: string, height: string, transform: string }} */
	var original_styles = null;

	nodes.a ??= {
		element,
		measure() {
			from = this.element.getBoundingClientRect();
		},
		apply() {
			animation?.abort();

			to = this.element.getBoundingClientRect();

			if (
				from.left !== to.left ||
				from.right !== to.right ||
				from.top !== to.top ||
				from.bottom !== to.bottom
			) {
				const options = get_fn()(this.element, { from, to }, get_params?.());

				animation = animate(this.element, options, undefined, 1, () => {
					animation?.abort();
					animation = undefined;
				});
			}
		},
		fix() {
			// If an animation is already running, transforming the element is likely to fail,
			// because the styles applied by the animation take precedence. In the case of crossfade,
			// that means the `translate(...)` of the crossfade transition overrules the `translate(...)`
			// we would apply below, leading to the element jumping somewhere to the top left.
			if (element.getAnimations().length) return;

			// It's important to destructure these to get fixed values - the object itself has getters,
			// and changing the style to 'absolute' can for example influence the width.
			var { position, width, height } = getComputedStyle(element);

			if (position !== 'absolute' && position !== 'fixed') {
				var style = /** @type {HTMLElement | SVGElement} */ (element).style;

				original_styles = {
					position: style.position,
					width: style.width,
					height: style.height,
					transform: style.transform
				};

				style.position = 'absolute';
				style.width = width;
				style.height = height;
				var to = element.getBoundingClientRect();

				if (from.left !== to.left || from.top !== to.top) {
					var transform = `translate(${from.left - to.left}px, ${from.top - to.top}px)`;
					style.transform = style.transform ? `${style.transform} ${transform}` : transform;
				}
			}
		},
		unfix() {
			if (original_styles) {
				var style = /** @type {HTMLElement | SVGElement} */ (element).style;

				style.position = original_styles.position;
				style.width = original_styles.width;
				style.height = original_styles.height;
				style.transform = original_styles.transform;
			}