fix: reinsert attribute to specify direction of ViewTransition (forward / back) (#8109)
This commit is contained in:
parent
d6b4943764
commit
da6e3da1ce
2 changed files with 12 additions and 7 deletions
5
.changeset/wet-foxes-sleep.md
Normal file
5
.changeset/wet-foxes-sleep.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'astro': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: reinsert attribute to specify direction of ViewTransition (forward / back)
|
|
@ -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);
|
||||||
|
|
Loading…
Add table
Reference in a new issue