Skip to content
Merged
Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
d602e06
fix(astro:transitions): add missing docs for available public APIs
ArmandPhilippot Nov 18, 2025
33776c4
fix/add links
ArmandPhilippot Nov 18, 2025
1621175
use ReadMore with existing content
ArmandPhilippot Nov 18, 2025
ab93cff
fix `direction` type, I write about the change but didn't update docs!
ArmandPhilippot Nov 18, 2025
752e69f
add precision about event attributes availability
ArmandPhilippot Nov 18, 2025
a8eb420
small rewording on existing content
ArmandPhilippot Nov 18, 2025
6dadf51
update/add links in the view transitions guide
ArmandPhilippot Nov 19, 2025
b3352d5
add lifecycle events types/since
ArmandPhilippot Nov 19, 2025
adb4db1
consistent indentation in scripts
ArmandPhilippot Nov 19, 2025
bc9c53b
update `direction` description based on Martin feedback + fix link
ArmandPhilippot Nov 26, 2025
d17c28c
Merge branch 'main' into fix/add-missing-astro-transitions-docs
ArmandPhilippot Nov 26, 2025
14d134f
Apply Martin fixes to createAnimationScope
ArmandPhilippot Nov 28, 2025
32b0f50
remove `createAnimationScope``
ArmandPhilippot Dec 4, 2025
74d9bd9
add a Deprecated imports sections
ArmandPhilippot Dec 4, 2025
8da069d
fix links
ArmandPhilippot Dec 4, 2025
d82ce25
hide the deprecated imports from the toc?
ArmandPhilippot Dec 4, 2025
794ecd1
Thanks Sarah
ArmandPhilippot Dec 4, 2025
f6580ac
revert `formData` description changes
ArmandPhilippot Dec 4, 2025
1ad0374
add individual deprecation warnings
ArmandPhilippot Dec 4, 2025
c6d9bd4
Merge branch 'main' into fix/add-missing-astro-transitions-docs
ArmandPhilippot Dec 5, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 5 additions & 15 deletions src/content/docs/en/guides/view-transitions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -391,27 +391,17 @@ import { ClientRouter } from "astro:transitions";
</html>
```

The `navigate` method takes these arguments:

- `href` (required) - The new page to navigate to.
- `options` - An optional object with the following properties:
- `history`: `"push"` | `"replace"` | `"auto"`
- `"push"`: the router will use `history.pushState` to create a new entry in the browser history.
- `"replace"`: the router will use `history.replaceState` to update the URL without adding a new entry into navigation.
- `"auto"` (default): the router will attempt `history.pushState`, but if the URL is not one that can be transitioned to, the current URL will remain with no changes to the browser history.
- `formData`: A [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object for `POST` requests.

For backward and forward navigation through the browser history, you can combine `navigate()` with the built-in `history.back()`, `history.forward()` and `history.go()` functions of the browser. If `navigate()` is called during the server-side render of your component, it has no effect.

<ReadMore>See the `astro:transitions` reference for more information about the [`navigate()` options](/en/reference/modules/astro-transitions/#navigate).</ReadMore>

### Replace entries in the browser history

Normally, each time you navigate, a new entry is written to the browser's history. This allows navigation between pages using the browser's `back` and `forward` buttons.

The `<ClientRouter />` router allows you to overwrite history entries by adding the `data-astro-history` attribute to any individual `<a>` tag.

The `data-astro-history` attribute can be set to the same three values as the [`history` option of the `navigate()` function](#trigger-navigation):

`data-astro-history`: `"push"` | `"replace"` | `"auto"`
The `data-astro-history` attribute can be set to the same three values as the [`history` option of the `navigate()` function](/en/reference/modules/astro-transitions/#history-option):

- `"push"`: the router will use `history.pushState` to create a new entry in the browser history.
- `"replace"`: the router will use `history.replaceState` to update the URL without adding a new entry into navigation.
Expand Down Expand Up @@ -632,7 +622,7 @@ This event is used:
- To alter loading, such as loading content you've defined in a template rather than from the external URL.
- To change the `direction` of the navigation (which is usually either `forward` or `backward`) for custom animation.

Here is an example of using the `astro:before-preparation` event to load a spinner before the content is loaded and stop it immediately after loading. Note that using the `loader` callback in this way allows asynchronous execution of code.
Here is an example of using the `astro:before-preparation` event to load a spinner before the content is loaded and stop it immediately after loading. Note that using the [`loader` callback](/en/reference/modules/astro-transitions/#loader) in this way allows asynchronous execution of code.

```astro
<script is:inline>
Expand Down Expand Up @@ -704,7 +694,7 @@ At this point of the lifecycle, you could choose to define your own swap impleme

<p><Since v="4.15.0" /></p>

The `swapFunctions` object of the `astro:transitions/client` module provides five utility functions that handle specific swap-related tasks, including handling document attributes, page elements, and script execution. These functions can be used directly to define a custom swap implementation.
The [`swapFunctions` object](/en/reference/modules/astro-transitions/#swapfunctions) of the `astro:transitions/client` module provides five utility functions that handle specific swap-related tasks, including handling document attributes, page elements, and script execution. These functions can be used directly to define a custom swap implementation.

The following example demonstrates how to use these functions to recreate Astro's built-in swap implementation:

Expand Down
Loading