mirror of
https://github.com/withastro/astro.git
synced 2025-01-20 22:12:38 -05:00
33 lines
1.2 KiB
Markdown
33 lines
1.2 KiB
Markdown
|
---
|
||
|
|
'astro': minor
|
||
|
|
---
|
||
|
|
|
||
|
|
Adds a new object `swapFunctions` to expose the necessary utility functions on `astro:transitions/client` that allow you to build custom swap functions to be used with view transitions.
|
||
|
|
|
||
|
|
The example below uses these functions to replace Astro's built-in default `swap` function with one that only swaps the `<main>` part of the page:
|
||
|
|
|
||
|
|
```astro
|
||
|
|
<script>
|
||
|
|
import { swapFunctions } from 'astro:transitions/client';
|
||
|
|
|
||
|
|
document.addEventListener('astro:before-swap', (e) => { e.swap = () => swapMainOnly(e.newDocument) });
|
||
|
|
|
||
|
|
function swapMainOnly(doc: Document) {
|
||
|
|
swapFunctions.deselectScripts(doc);
|
||
|
|
swapFunctions.swapRootAttributes(doc);
|
||
|
|
swapFunctions.swapHeadElements(doc);
|
||
|
|
const restoreFocusFunction = swapFunctions.saveFocus();
|
||
|
|
const newMain = doc.querySelector('main');
|
||
|
|
const oldMain = document.querySelector('main');
|
||
|
|
if (newMain && oldMain) {
|
||
|
|
swapFunctions.swapBodyElement(newMain, oldMain);
|
||
|
|
} else {
|
||
|
|
swapFunctions.swapBodyElement(doc.body, document.body);
|
||
|
|
}
|
||
|
|
restoreFocusFunction();
|
||
|
|
};
|
||
|
|
<script>
|
||
|
|
```
|
||
|
|
|
||
|
|
See the [view transitions guide](https://docs.astro.build/en/guides/view-transitions/#astrobefore-swap) for more information about hooking into the `astro:before-swap` lifecycle event and adding a custom swap implementation.
|