astro Architecture Docs
Home / Function/ renderTransition() — astro Function Reference

renderTransition() — astro Function Reference

Architecture documentation for the renderTransition() function in transition.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 8

Entity Profile

Dependency Diagram

graph TD
  76c15535_9f6b_845e_9f22_f5c86e52ea7b["renderTransition()"]
  f4a9c12d_07bd_6de6_237f_8553c55f6fef["transition.ts"]
  76c15535_9f6b_845e_9f22_f5c86e52ea7b -->|defined in| f4a9c12d_07bd_6de6_237f_8553c55f6fef
  43354635_9277_321c_ee7e_862498c43def["createTransitionScope()"]
  76c15535_9f6b_845e_9f22_f5c86e52ea7b -->|calls| 43354635_9277_321c_ee7e_862498c43def
  80ac6187_24ca_368d_b34e_938a0f40539a["reEncode()"]
  76c15535_9f6b_845e_9f22_f5c86e52ea7b -->|calls| 80ac6187_24ca_368d_b34e_938a0f40539a
  f7edef03_fcb6_4581_e5fd_76025f5f44d5["getAnimations()"]
  76c15535_9f6b_845e_9f22_f5c86e52ea7b -->|calls| f7edef03_fcb6_4581_e5fd_76025f5f44d5
  b520ade9_7c6f_51cb_ea8f_301d3ddee8a7["addPairs()"]
  76c15535_9f6b_845e_9f22_f5c86e52ea7b -->|calls| b520ade9_7c6f_51cb_ea8f_301d3ddee8a7
  bddee0a0_6f9b_881a_da47_a6afb3379489["addFallback()"]
  76c15535_9f6b_845e_9f22_f5c86e52ea7b -->|calls| bddee0a0_6f9b_881a_da47_a6afb3379489
  066351a7_c283_6d13_ba2b_260df1d0fe47["addModern()"]
  76c15535_9f6b_845e_9f22_f5c86e52ea7b -->|calls| 066351a7_c283_6d13_ba2b_260df1d0fe47
  27976e4d_cb29_8c73_4a03_b05d48d34065["addAnimationRaw()"]
  76c15535_9f6b_845e_9f22_f5c86e52ea7b -->|calls| 27976e4d_cb29_8c73_4a03_b05d48d34065
  2527a613_a18b_f09f_d953_5ec7867c60a5["toString()"]
  76c15535_9f6b_845e_9f22_f5c86e52ea7b -->|calls| 2527a613_a18b_f09f_d953_5ec7867c60a5
  style 76c15535_9f6b_845e_9f22_f5c86e52ea7b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/server/transition.ts lines 88–116

export function renderTransition(
	result: SSRResult,
	hash: string,
	animationName: TransitionAnimationValue | undefined,
	transitionName: string,
) {
	if (typeof (transitionName ?? '') !== 'string') {
		throw new Error(`Invalid transition name {${transitionName}}`);
	}
	// Default to `fade` (similar to `initial`, but snappier)
	if (!animationName) animationName = 'fade';
	const scope = createTransitionScope(result, hash);
	const name = transitionName ? cssesc(reEncode(transitionName), { isIdentifier: true }) : scope;
	const sheet = new ViewTransitionStyleSheet(scope, name);

	const animations = getAnimations(animationName);
	if (animations) {
		addPairs(animations, sheet);
	} else if (animationName === 'none') {
		sheet.addFallback('old', 'animation: none; mix-blend-mode: normal;');
		sheet.addModern('old', 'animation: none; opacity: 0; mix-blend-mode: normal;');
		sheet.addAnimationRaw('new', 'animation: none; mix-blend-mode: normal;');
		sheet.addModern('group', 'animation: none');
	}

	const css = sheet.toString();
	result._metadata.extraHead.push(markHTMLString(`<style>${css}</style>`));
	return scope;
}

Domain

Subdomains

Defined In

Calls

Source

Frequently Asked Questions

What does renderTransition() do?
renderTransition() is a function in the astro codebase, defined in packages/astro/src/runtime/server/transition.ts.
Where is renderTransition() defined?
renderTransition() is defined in packages/astro/src/runtime/server/transition.ts at line 88.
What does renderTransition() call?
renderTransition() calls 8 function(s): addAnimationRaw, addFallback, addModern, addPairs, createTransitionScope, getAnimations, reEncode, toString.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free