transition() — svelte Function Reference

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

Function javascript ClientRuntime Hydration calls 5 called by 1

Entity Profile

ClientRuntime→ Hydration→ transition() — svelte Function Reference

Dependency Diagram

graph TD
  44764042_8b9f_4b88_947a_7c8b4732666d["transition()"]
  e29c417d_6c26_6125_97f5_600e95e02dac["transitions.js"]
  44764042_8b9f_4b88_947a_7c8b4732666d -->|defined in| e29c417d_6c26_6125_97f5_600e95e02dac
  df0bba2e_5fd6_624d_e576_6c964cadc587["animate()"]
  df0bba2e_5fd6_624d_e576_6c964cadc587 -->|calls| 44764042_8b9f_4b88_947a_7c8b4732666d
  e95d0513_ce71_430f_7ef3_577e736f42c1["without_reactive_context()"]
  44764042_8b9f_4b88_947a_7c8b4732666d -->|calls| e95d0513_ce71_430f_7ef3_577e736f42c1
  df0bba2e_5fd6_624d_e576_6c964cadc587["animate()"]
  44764042_8b9f_4b88_947a_7c8b4732666d -->|calls| df0bba2e_5fd6_624d_e576_6c964cadc587
  df3eb428_b4f0_dfc3_ea43_9d12d88502ee["dispatch_event()"]
  44764042_8b9f_4b88_947a_7c8b4732666d -->|calls| df3eb428_b4f0_dfc3_ea43_9d12d88502ee
  a985ae40_8ef8_7ef2_adad_116fbf97e70c["effect()"]
  44764042_8b9f_4b88_947a_7c8b4732666d -->|calls| a985ae40_8ef8_7ef2_adad_116fbf97e70c
  a814b193_e12a_4037_c3c8_dfd45f3bd0bb["untrack()"]
  44764042_8b9f_4b88_947a_7c8b4732666d -->|calls| a814b193_e12a_4037_c3c8_dfd45f3bd0bb
  style 44764042_8b9f_4b88_947a_7c8b4732666d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/elements/transitions.js lines 186–301

export function transition(flags, element, get_fn, get_params) {
	var is_intro = (flags & TRANSITION_IN) !== 0;
	var is_outro = (flags & TRANSITION_OUT) !== 0;
	var is_both = is_intro && is_outro;
	var is_global = (flags & TRANSITION_GLOBAL) !== 0;

	/** @type {'in' | 'out' | 'both'} */
	var direction = is_both ? 'both' : is_intro ? 'in' : 'out';

	/** @type {AnimationConfig | ((opts: { direction: 'in' | 'out' }) => AnimationConfig) | undefined} */
	var current_options;

	var inert = element.inert;

	/**
	 * The default overflow style, stashed so we can revert changes during the transition
	 * that are necessary to work around a Safari <18 bug
	 * TODO 6.0 remove this, if older versions of Safari have died out enough
	 */
	var overflow = element.style.overflow;

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

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

	function get_options() {
		return without_reactive_context(() => {
			// If a transition is still ongoing, we use the existing options rather than generating
			// new ones. This ensures that reversible transitions reverse smoothly, rather than
			// jumping to a new spot because (for example) a different `duration` was used
			return (current_options ??= get_fn()(element, get_params?.() ?? /** @type {P} */ ({}), {
				direction
			}));
		});
	}

	/** @type {TransitionManager} */
	var transition = {
		is_global,
		in() {
			element.inert = inert;

			if (!is_intro) {
				outro?.abort();
				outro?.reset?.();
				return;
			}

			if (!is_outro) {
				// if we intro then outro then intro again, we want to abort the first intro,
				// if it's not a bidirectional transition
				intro?.abort();
			}

			intro = animate(element, get_options(), outro, 1, () => {
				dispatch_event(element, 'introend');

				// Ensure we cancel the animation to prevent leaking
				intro?.abort();
				intro = current_options = undefined;

				element.style.overflow = overflow;
			});
		},
		out(fn) {
			if (!is_outro) {
				fn?.();
				current_options = undefined;
				return;
			}

			element.inert = true;

			outro = animate(element, get_options(), intro, 0, () => {
				dispatch_event(element, 'outroend');
				fn?.();
			});
		},
		stop: () => {