addAnimationPair() — astro Function Reference

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

Function typescript CoreAstro RenderingEngine calls 2 called by 1

Entity Profile

CoreAstro→ RenderingEngine→ addAnimationPair() — astro Function Reference

Dependency Diagram

graph TD
  1920fb61_b9e6_5573_7885_73058c25bccf["addAnimationPair()"]
  d7cc381c_9294_21bb_a466_854d22d9bf61["ViewTransitionStyleSheet"]
  1920fb61_b9e6_5573_7885_73058c25bccf -->|defined in| d7cc381c_9294_21bb_a466_854d22d9bf61
  b520ade9_7c6f_51cb_ea8f_301d3ddee8a7["addPairs()"]
  b520ade9_7c6f_51cb_ea8f_301d3ddee8a7 -->|calls| 1920fb61_b9e6_5573_7885_73058c25bccf
  80c6564a_bf5c_0a79_226b_9b6d8ff8c1e3["addRule()"]
  1920fb61_b9e6_5573_7885_73058c25bccf -->|calls| 80c6564a_bf5c_0a79_226b_9b6d8ff8c1e3
  f7291c38_0905_3597_aad0_0aff4467dbc8["stringifyAnimation()"]
  1920fb61_b9e6_5573_7885_73058c25bccf -->|calls| f7291c38_0905_3597_aad0_0aff4467dbc8
  style 1920fb61_b9e6_5573_7885_73058c25bccf fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/server/transition.ts lines 179–198

	addAnimationPair(
		direction: 'forwards' | 'backwards' | string,
		image: 'old' | 'new',
		rules: TransitionAnimation | TransitionAnimation[],
	) {
		const { scope, name } = this;
		const animation = stringifyAnimation(rules);
		const prefix =
			direction === 'backwards'
				? `[data-astro-transition=back]`
				: direction === 'forwards'
					? ''
					: `[data-astro-transition=${direction}]`;
		this.addRule('modern', `${prefix}::view-transition-${image}(${name}) { ${animation} }`);
		this.addRule(
			'fallback',
			`${prefix}[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"],
			${prefix}[data-astro-transition-fallback="${image}"][data-astro-transition-scope="${scope}"] { ${animation} }`,
		);
	}