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

View Transitions: do not animate same page navigation, but animate hash links to different pages (#8013)

Browse source 
* Links with hash marks are now supported if they lead to a different page

* treat links to same page equally, independent of hash or not

* Links to the same page do not trigger view transitions

* special treatment for trailing hash

* view transitions: simpler rule to exclude in-page links
This commit is contained in:
Martin Trapp 2023-08-10 16:07:13 +02:00 • committed by GitHub
parent fc30b8539c
commit 86bee28121
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/tender-tips-kneel.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Links with hash marks now trigger view transitions if they lead to a different page. Links to the same page do not trigger view transitions.

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

@ -132,6 +132,10 @@ const { fallback = 'animate' } = Astro.props as Props;
} }
} }
if (state?.scrollY === 0 && location.hash) {
const id = decodeURIComponent(location.hash.slice(1));
state.scrollY = document.getElementById(id)?.offsetTop || 0;
}
if (state?.scrollY != null) { if (state?.scrollY != null) {
scrollTo(0, state.scrollY); scrollTo(0, state.scrollY);
} }
@ -235,7 +239,7 @@ const { fallback = 'animate' } = Astro.props as Props;
link.href && link.href &&
(!link.target || link.target === '_self') && (!link.target || link.target === '_self') &&
link.origin === location.origin && link.origin === location.origin &&
!link.hash && location.pathname !== link.pathname &&
ev.button === 0 && // left clicks only ev.button === 0 && // left clicks only
!ev.metaKey && // new tab (mac) !ev.metaKey && // new tab (mac)
!ev.ctrlKey && // new tab (windows) !ev.ctrlKey && // new tab (windows)