forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
fix: use root transition to resolve safari scroll restoration issues
+4
-7
+4
-7
src/components/layout/TransitionWrapper.astro
+4
-7
src/components/layout/TransitionWrapper.astro
···
3
3
4
4
type Props = TransitionProps
5
5
6
-
const { type, class: className = '' } = Astro.props
7
-
const transitionName = type === 'post' ? 'post-content' : 'page-content'
6
+
const { class: className = '' } = Astro.props
8
7
---
9
8
10
-
<div transition:name={transitionName} class={className} id="transition-wrapper">
9
+
<div class={className} id="transition-wrapper">
11
10
<slot />
12
11
</div>
13
12
···
31
30
<style is:inline>
32
31
@supports (view-transition-name: none) {
33
32
@media not (prefers-reduced-motion: reduce) {
34
-
::view-transition-old(post-content),
35
-
::view-transition-old(page-content) {
33
+
::view-transition-old(root) {
36
34
animation: fade-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
37
35
}
38
36
39
-
::view-transition-new(post-content),
40
-
::view-transition-new(page-content) {
37
+
::view-transition-new(root) {
41
38
opacity: 0;
42
39
animation: fade-in 0.4s ease 0.2s forwards;
43
40
will-change: filter, opacity, transform;