41afb84057
* First pass at transition:persist * Persistent islands * Changeset * Updated compiler * Use official release * Upgrade again * Refactor to allow head content to persist untouched * >= * Specify the types for "astro:persist" * Automatically persist links * Use reference for array * Upgrade to latest compiler version * Explain the feature * Update .changeset/empty-experts-unite.md Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> * Update .changeset/empty-experts-unite.md Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> * Update .changeset/empty-experts-unite.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Update .changeset/empty-experts-unite.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> --------- Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
1.1 KiB
| astro |
|---|
| minor |
Persistent DOM and Islands in Experimental View Transitions
With viewTransitions: true enabled in your Astro config's experimental section, pages using the <ViewTransition /> routing component can now access a new transition:persist directive.
With this directive, you can keep the state of DOM elements and islands on the old page when transitioning to the new page.
For example, to keep a video playing across page navigation, add transition:persist to the element:
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
This <video> element, with its current state, will be moved over to the next page (if the video also exists on that page).
Likewise, this feature works with any client-side framework component island. In this example, a counter's state is preserved and moved to the new page:
<Counter count={5} client:load transition:persist />
See our View Transitions Guide to learn more on usage.