View Transitions Router API Reference
यह कंटेंट अभी तक आपकी भाषा में उपलब्ध नहीं है।
जोड़ा गया:
astro@3.0.0
These modules provide functions to control and interact with the View Transitions API and client-side router.
This API is compatible with the <ClientRouter />
included in astro:transitions
, but can’t be used with native browser MPA routing.
For features and usage examples, see our View Transitions guide.
Imports from astro:transitions
Section titled Imports from astro:transitions<ClientRouter />
Section titled <ClientRouter />
जोड़ा गया:
astro@3.0.0
Opt in to using view transitions on individual pages by importing and adding the <ClientRouter />
routing component to <head>
on every desired page.
See more about how to control the router and add transition directives to page elements and components.
Type: (opts: { duration?: string | number }) => TransitionDirectionalAnimations
astro@3.0.0
Utility function to support customizing the duration of the built-in fade
animation.
slide
Section titled slideType: (opts: { duration?: string | number }) => TransitionDirectionalAnimations
astro@3.0.0
Utility function to support customizing the duration of the built-in slide
animation.
Imports from astro:transitions/client
Section titled Imports from astro:transitions/clientnavigate()
Section titled navigate()Type: (href: string, options?: Options) => void
astro@3.2.0
A function that executes a navigation to the given href
using the View Transitions API.
This function signature is based on the navigate
function from the browser Navigation API. Although based on the Navigation API, this function is implemented on top of the History API to allow for navigation without reloading the page.
history
option
Section titled history optionType: 'auto' | 'push' | 'replace'
Default: 'auto'
astro@3.2.0
Defines how this navigation should be added to the browser history.
'push'
: the router will usehistory.pushState
to create a new entry in the browser history.'replace'
: the router will usehistory.replaceState
to update the URL without adding a new entry into navigation.'auto'
(default): the router will attempthistory.pushState
, but if the URL cannot be transitioned to, the current URL will remain with no changes to the browser history.
This option follows the history
option from the browser Navigation API but simplified for the cases that can happen on an Astro project.
formData
option
Section titled formData optionType: FormData
astro@3.5.0
A FormData
object for POST
requests.
When this option is provided, the requests to the navigation target page will be sent as a POST
request with the form data object as the content.
Submitting an HTML form with view transitions enabled will use this method instead of the default navigation with page reload. Calling this method allows triggering the same behavior programmatically.
info
option
Section titled info optionType: any
astro@3.6.0
Arbitrary data to be included in the astro:before-preparation
and astro:before-swap
events caused by this navigation.
This option mimics the info
option from the browser Navigation API.
state
option
Section titled state optionType: any
astro@3.6.0
Arbitrary data to be associated with the NavitationHistoryEntry
object created by this navigation. This data can then be retrieved using the history.getState
function from the History API.
This option mimics the state
option from the browser Navigation API.
sourceElement
option
Section titled sourceElement optionType: Element
astro@3.6.0
The element that triggered this navigation, if any. This element will be available in the following events:
astro:before-preparation
astro:before-swap
supportsViewTransitions
Section titled supportsViewTransitionsType: boolean
astro@3.2.0
Whether or not view transitions are supported and enabled in the current browser.
transitionEnabledOnThisPage
Section titled transitionEnabledOnThisPageType: boolean
astro@3.2.0
Whether or not the current page has view transitions enabled for client-side navigation. This can be used to make components that behave differently when they are used on pages with view transitions.
getFallback()
Section titled getFallback()Type: () => 'none' | 'animate' | 'swap'
astro@3.6.0
Returns the fallback strategy to use in browsers that do not support view transitions.
See the guide on Fallback control for how to choose and configure the fallback behavior.
swapFunctions
Section titled swapFunctions
जोड़ा गया:
astro@4.15.0
An object containing the utility functions used to build Astro’s default swap function. These can be useful when building a custom swap function.
swapFunctions
provides the following methods:
deselectScripts()
Section titled deselectScripts()Type: (newDocument: Document) => void
Marks scripts in the new document that should not be executed. Those scripts are already in the current document and are not flagged for re-execution using data-astro-rerun
.
swapRootAttributes()
Section titled swapRootAttributes()Type: (newDocument: Document) => void
Swaps the attributes between the document roots, like the lang
attribute. This also includes Astro-injected internal attributes like data-astro-transition
, which makes the transition direction available to Astro-generated CSS rules.
When making a custom swap function, it is important to call this function so as not to break the view transition’s animations.
swapHeadElements()
Section titled swapHeadElements()Type: (newDocument: Document) => void
Removes every element from the current document’s <head>
that is not persisted to the new document. Then appends all new elements from the new document’s <head>
to the current document’s <head>
.
saveFocus()
Section titled saveFocus()Type: () => () => void
Stores the element in focus on the current page and returns a function that when called, if the focused element was persisted, returns the focus to it.
swapBodyElement()
Section titled swapBodyElement()Type: (newBody: Element, oldBody: Element) => void
Replaces the old body with the new body. Then, goes through every element in the old body that should be persisted and have a matching element in the new body and swaps the old element back in place.
Lifecycle events
Section titled Lifecycle eventsastro:before-preparation
event
Section titled astro:before-preparation eventAn event dispatched at the beginning of a navigation using the View Transitions router. This event happens before any request is made and any browser state is changed.
This event has the attributes:
Read more about how to use this event on the View Transitions guide.
astro:after-preparation
event
Section titled astro:after-preparation eventAn event dispatched after the next page in a navigation using View Transitions router is loaded.
This event has no attributes.
Read more about how to use this event on the View Transitions guide.
astro:before-swap
event
Section titled astro:before-swap eventAn event dispatched after the next page is parsed, prepared, and linked into a document in preparation for the transition but before any content is swapped between the documents.
This event can’t be canceled. Calling preventDefault()
is a no-op.
This event has the attributes:
Read more about how to use this event on the View Transitions guide.
astro:after-swap
event
Section titled astro:after-swap eventAn event dispatched after the contents of the page have been swapped but before the view transition ends.
The history entry and scroll position have already been updated when this event is triggered.
astro:page-load
event
Section titled astro:page-load eventAn event dispatched after a page completes loading, whether from a navigation using view transitions or native to the browser.
When view transitions is enabled on the page, code that would normally execute on DOMContentLoaded
should be changed to execute on this event.
Lifecycle events attributes
Section titled Lifecycle events attributes
जोड़ा गया:
astro@3.6.0
Type: URL
Arbitrary data defined during navigation.
This is the literal value passed on the info
option of the navigate()
function.
sourceElement
Section titled sourceElementType: Element | undefined
The element that triggered the navigation. This can be, for example, an <a>
element that was clicked.
When using the navigate()
function, this will be the element specified in the call.
newDocument
Section titled newDocumentType: Document
The document for the next page in the navigation. The contents of this document will be swapped in place of the contents of the current document.
navigationType
Section titled navigationTypeType: 'push' | 'replace' | 'traverse'
Which kind of history navigation is happening.
push
: a newNavigationHistoryEntry
is being created for the new page.replace
: the currentNavigationHistoryEntry
is being replaced with an entry for the new page.traverse
: noNavigationHistoryEntry
is created. The position in the history is changing. The direction of the traversal is given on thedirection
attribute
direction
Section titled directionType: Direction
The direction of the transition.
forward
: navigating to the next page in the history or to a new page.back
: navigating to the previous page in the history.- Anything else some other listener might have set.
Type: URL
The URL of the page initiating the navigation.
Type: URL
The URL of the page being navigated to. This property can be modified, the value at the end of the lifecycle will be used in the NavigationHistoryEntry
for the next page.
formData
Section titled formDataType: FormData | undefined
A FormData
object for POST
requests.
When this attribute is set, a POST
request will be sent to the to
URL with the given form data object as the content instead of the normal GET
request.
When submitting an HTML form with view transitions enabled, this field is automatically set to the data in the form. When using the navigate()
function, this value is the same as given in the options.
loader()
Section titled loader()Type: () => Promise<void>
Implementation of the following phase in the navigation (loading the next page). This implementation can be overridden to add extra behavior.
viewTransition
Section titled viewTransitionType: ViewTransition
The view transition object used in this navigation. On browsers that do not support the View Transitions API, this is an object implementing the same API for convenience but without the DOM integration.
swap()
Section titled swap()Type: () => void
Implementation of the document swap logic.
Read more about building a custom swap function in the View Transitions guide.
By default, this implementation will call the following functions in order:
Reference