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 GitHub
parent d6b4943764
commit da6e3da1ce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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(); 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'); 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 // Check for a head element that should persist, either because it has the data
// attribute or is a link el. // attribute or is a link el.
@ -233,15 +232,17 @@ const { fallback = 'animate' } = Astro.props as Props;
location.href = href; location.href = href;
return; return;
} }
document.documentElement.dataset.astroTransition = dir;
if (supportsViewTransitions) { if (supportsViewTransitions) {
finished = document.startViewTransition(() => updateDOM(dir, html, state)).finished; finished = document.startViewTransition(() => updateDOM(html, state)).finished;
} else { } else {
finished = updateDOM(dir, html, state, getFallback()); finished = updateDOM(html, state, getFallback());
} }
try { try {
await finished; await finished;
} finally { } 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(); await runScripts();
markScriptsExec(); markScriptsExec();
onload(); onload();
@ -291,8 +292,7 @@ const { fallback = 'animate' } = Astro.props as Props;
transitionEnabledOnThisPage() transitionEnabledOnThisPage()
) { ) {
ev.preventDefault(); ev.preventDefault();
navigate('forward', link.href, { index: currentHistoryIndex, scrollY: 0 }); navigate('forward', link.href, { index: ++currentHistoryIndex, scrollY: 0 });
currentHistoryIndex++;
const newState: State = { index: currentHistoryIndex, scrollY }; const newState: State = { index: currentHistoryIndex, scrollY };
persistState({ index: currentHistoryIndex - 1, scrollY }); persistState({ index: currentHistoryIndex - 1, scrollY });
history.pushState(newState, '', link.href); history.pushState(newState, '', link.href);