addFallback() — astro Function Reference

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

Function typescript CoreAstro RenderingEngine calls 1 called by 2

Entity Profile

CoreAstro→ RenderingEngine→ addFallback() — astro Function Reference

Dependency Diagram

graph TD
  bddee0a0_6f9b_881a_da47_a6afb3379489["addFallback()"]
  d7cc381c_9294_21bb_a466_854d22d9bf61["ViewTransitionStyleSheet"]
  bddee0a0_6f9b_881a_da47_a6afb3379489 -->|defined in| d7cc381c_9294_21bb_a466_854d22d9bf61
  76c15535_9f6b_845e_9f22_f5c86e52ea7b["renderTransition()"]
  76c15535_9f6b_845e_9f22_f5c86e52ea7b -->|calls| bddee0a0_6f9b_881a_da47_a6afb3379489
  27976e4d_cb29_8c73_4a03_b05d48d34065["addAnimationRaw()"]
  27976e4d_cb29_8c73_4a03_b05d48d34065 -->|calls| bddee0a0_6f9b_881a_da47_a6afb3379489
  80c6564a_bf5c_0a79_226b_9b6d8ff8c1e3["addRule()"]
  bddee0a0_6f9b_881a_da47_a6afb3379489 -->|calls| 80c6564a_bf5c_0a79_226b_9b6d8ff8c1e3
  style bddee0a0_6f9b_881a_da47_a6afb3379489 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/server/transition.ts lines 169–177

	addFallback(image: 'old' | 'new' | 'group', animation: string) {
		const { scope } = this;
		this.addRule(
			'fallback',
			// Two selectors here, the second in case there is an animation on the root.
			`[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"],
			[data-astro-transition-fallback="${image}"][data-astro-transition-scope="${scope}"] { ${animation} }`,
		);
	}