michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: reinsert attribute to specify direction of ViewTransition (forward / back) (#8109)

Browse source
This commit is contained in:
Martin Trapp 2023-08-17 15:28:21 +02:00 committed by Emanuele Stoppa
parent be6bbd2c86
commit a87cbe4003
2 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/wet-foxes-sleep.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
fix: reinsert attribute to specify direction of ViewTransition (forward / back)

14
packages/astro/components/ViewTransitions.astro
View file

@ -101,9 +101,8 @@ const { fallback = 'animate' } = Astro.props as Props;
const parser = new DOMParser();
async function updateDOM(dir: Direction, html: string, state?: State, fallback?: Fallback) {
async function updateDOM(html: string, state?: State, fallback?: Fallback) {
const doc = parser.parseFromString(html, 'text/html');
doc.documentElement.dataset.astroTransition = dir;
// Check for a head element that should persist, either because it has the data
// attribute or is a link el.
@ -233,15 +232,17 @@ const { fallback = 'animate' } = Astro.props as Props;
location.href = href;
return;
}
document.documentElement.dataset.astroTransition = dir;
if (supportsViewTransitions) {
finished = document.startViewTransition(() => updateDOM(dir, html, state)).finished;
finished = document.startViewTransition(() => updateDOM(html, state)).finished;
} else {
finished = updateDOM(dir, html, state, getFallback());
finished = updateDOM(html, state, getFallback());
}
try {
await finished;
} finally {
document.documentElement.removeAttribute('data-astro-transition');
// skip this for the moment as it tends to stop fallback animations
// document.documentElement.removeAttribute('data-astro-transition');
await runScripts();
markScriptsExec();
onload();
@ -291,8 +292,7 @@ const { fallback = 'animate' } = Astro.props as Props;
transitionEnabledOnThisPage()
) {
ev.preventDefault();
navigate('forward', link.href, { index: currentHistoryIndex, scrollY: 0 });
currentHistoryIndex++;
navigate('forward', link.href, { index: ++currentHistoryIndex, scrollY: 0 });
const newState: State = { index: currentHistoryIndex, scrollY };
persistState({ index: currentHistoryIndex - 1, scrollY });
history.pushState(newState, '', link.href);