diff options
| author |  Martin Trapp <94928215+martrapp@users.noreply.github.com>
| 2023-08-10 16:07:13 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-08-10 10:07:13 -0400 |
| commit | 86bee2812185df6e14025e5962a335f51853587b (patch) | |
| tree | 1436e93e72724845575b5a3008def5e8266227b1 | |
| parent | fc30b8539c2a4b4271b798234f5056eb57ced46c (diff) | |
| download | astro-86bee2812185df6e14025e5962a335f51853587b.tar.gz astro-86bee2812185df6e14025e5962a335f51853587b.tar.zst astro-86bee2812185df6e14025e5962a335f51853587b.zip | |
View Transitions: do not animate same page navigation, but animate hash links to different pages (#8013)
* 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
| -rw-r--r-- | .changeset/tender-tips-kneel.md | 5 | ||||
| -rw-r--r-- | packages/astro/components/ViewTransitions.astro | 6 |
2 files changed, 10 insertions, 1 deletions
diff --git a/.changeset/tender-tips-kneel.md b/.changeset/tender-tips-kneel.md new file mode 100644 index 000000000..8301cf202 --- /dev/null +++ b/.changeset/tender-tips-kneel.md @@ -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. diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index 4f43171f9..d8d5bd1d7 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -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) { scrollTo(0, state.scrollY); } @@ -235,7 +239,7 @@ const { fallback = 'animate' } = Astro.props as Props; link.href && (!link.target || link.target === '_self') && link.origin === location.origin && - !link.hash && + location.pathname !== link.pathname && ev.button === 0 && // left clicks only !ev.metaKey && // new tab (mac) !ev.ctrlKey && // new tab (windows) |