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
This commit is contained in:
parent
fc30b8539c
commit
86bee28121
2 changed files with 10 additions and 1 deletions
5
.changeset/tender-tips-kneel.md
Normal file
5
.changeset/tender-tips-kneel.md
Normal 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.
|
|
@ -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)
|
||||||
|
|
Loading…
Add table
Reference in a new issue