From a87cbe400314341d5f72abf86ea264e6b47c091f Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Thu, 17 Aug 2023 15:28:21 +0200
Subject: [PATCH] fix: reinsert attribute to specify direction of
 ViewTransition (forward / back) (#8109)

---
 .changeset/wet-foxes-sleep.md                   |  5 +++++
 packages/astro/components/ViewTransitions.astro | 14 +++++++-------
 2 files changed, 12 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/wet-foxes-sleep.md

diff --git a/.changeset/wet-foxes-sleep.md b/.changeset/wet-foxes-sleep.md
new file mode 100644
index 000000000..7d81195f8
--- /dev/null
+++ b/.changeset/wet-foxes-sleep.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+fix: reinsert attribute to specify direction of ViewTransition (forward / back)
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
index 47eb3c112..3967d0aee 100644
--- a/packages/astro/components/ViewTransitions.astro
+++ b/packages/astro/components/ViewTransitions.astro
@@ -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);