mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
62b0d20b97
* extend virtual module astro:transitions/client to exports swapFunctions * use virtual module in e2e tests * Update .changeset/new-monkeys-sit.md * Update .changeset/new-monkeys-sit.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Update new-monkeys-sit.md * Update swap-functions.ts restoreFocus() bindings are now returned by saveFocus() and do not make sense anymore as a member of the swapFunctions object * take over suggestion Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Update .changeset/new-monkeys-sit.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> --------- Co-authored-by: Emanuele Stoppa <my.burning@gmail.com> Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
1.2 KiB
1.2 KiB
| 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:
<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 for more information about hooking into the astro:before-swap lifecycle event and adding a custom swap implementation.