fade() — astro Function Reference

Architecture documentation for the fade() function in index.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine

Entity Profile

CoreAstro→ RenderingEngine→ fade() — astro Function Reference

Dependency Diagram

graph TD
  9938c000_666f_de7e_e1c6_77eb71c9dd9e["fade()"]
  4165c511_345b_e746_8f71_be07c83373c5["index.ts"]
  9938c000_666f_de7e_e1c6_77eb71c9dd9e -->|defined in| 4165c511_345b_e746_8f71_be07c83373c5
  style 9938c000_666f_de7e_e1c6_77eb71c9dd9e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/transitions/index.ts lines 54–78

export function fade({
	duration,
}: {
	duration?: string | number;
} = {}): TransitionDirectionalAnimations {
	const anim = {
		old: {
			name: 'astroFadeOut',
			duration: duration ?? 180,
			easing: EASE_IN_OUT_QUART,
			fillMode: 'both',
		},
		new: {
			name: 'astroFadeIn',
			duration: duration ?? 180,
			easing: EASE_IN_OUT_QUART,
			fillMode: 'both',
		},
	} satisfies TransitionAnimationPair;

	return {
		forwards: anim,
		backwards: anim,
	};
}