📚 Subject area/topic

View Transitions

📋 Suggested page

Either on the View Transitions page (https://docs.astro.build/en/guides/view-transitions/#lifecycle-events) or on some reference page

📋 General description or bullet points (if proposing new content)

Document the type of the View Transition events, which fields are available and what each of them represent.

astro:page-load, astro:after-preparation and astro:after-swap have no special field and are the most used events, this may lead users to incorrectly assume that none of the events have special properties.

Both astro:before-preparation and astro:before-swap have the following properties:

• from: URL: The URL of the page initiating the transition.
• to: URL: The URL transitioning to. (can be modified)
• direction: Direction | string: Direction of the transition, used to change to a different animation when going back in history.
• navigationType: NavigationTypeString: What kind of history navigation is being applied
  • push: New URL is added to the history
  • replace: New URL replaces the previous URL in the history
  • traverse: History remains unchanged, transition is moving through the history
• sourceElement: Element | undefined: Element that triggered the navigation, if it came from a DOM element. This is undefined when the navigations was initiated from the navigate API.
• info: any: ?? Unclear to me where this comes from, requires some investigation.
• newDocument: Document: Content that will be swapped in place of the current document (document.documentElement).

astro:before-preparation also has:

• formData: FormData | undefined: The data that will be sent on the request to load the next page if a form action triggered the navigation.
• loader: () => Promise<void>: The function that runs the next phase of the transition (loading the next page). Can be overridden to add extra behavior or to prevent the execution of the next phase.

astro:before-swap also has:

• viewTransition: ViewTransition: The View Transition element that allows you to hook into it's promises. On browsers that don't have native VT this will be an object implementing the same API.
• swap: () => void: The function that runs the next phase of the transition (swapping the new document in place of the old document). Can be overridden to add extra behavior or to prevent the execution of the next phase.