forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
perf: tweak view transition support
+7
-44
+7
-44
src/components/layout/TransitionWrapper.astro
+7
-44
src/components/layout/TransitionWrapper.astro
···
11
11
<slot />
12
12
</div>
13
13
14
-
<script is:inline>
15
-
let isBackForward = false
16
-
17
-
// Check if View Transitions API is supported
18
-
const isViewTransitionSupported = 'startViewTransition' in document
19
-
20
-
// Listen for back/forward navigation
21
-
window.addEventListener('popstate', () => {
22
-
isBackForward = true
23
-
setTimeout(() => (isBackForward = false), 50)
24
-
})
25
-
26
-
// Override startViewTransition to skip transitions for back/forward navigation
27
-
if (isViewTransitionSupported && document.startViewTransition) {
28
-
const original = document.startViewTransition
29
-
document.startViewTransition = function (callback) {
30
-
if (isBackForward) {
31
-
callback?.()
32
-
return {
33
-
ready: Promise.resolve(),
34
-
updateCallbackDone: Promise.resolve(),
35
-
finished: Promise.resolve()
36
-
}
37
-
}
38
-
return original.call(document, callback)
39
-
}
40
-
}
41
-
42
-
// Cleanup hover states after Astro page load and on touch events
43
-
function cleanupHover() {
44
-
const hoveredLinks = document.querySelectorAll('ul a:hover')
45
-
hoveredLinks.forEach((link) => {
46
-
link.style.opacity = ''
47
-
})
48
-
}
49
-
50
-
document.addEventListener('astro:page-load', () => {
51
-
setTimeout(cleanupHover, 50)
52
-
})
53
-
54
-
// Add touch event listener for touch devices
55
-
document.addEventListener('touchstart', cleanupHover, { passive: true })
56
-
</script>
57
-
58
14
<style is:inline>
59
15
@supports (view-transition-name: none) {
60
16
@media not (prefers-reduced-motion: reduce) {
···
70
26
will-change: filter, opacity, transform;
71
27
}
72
28
}
29
+
}
30
+
31
+
html.astro-backward::view-transition-old(*),
32
+
html.astro-backward::view-transition-new(*),
33
+
html.astro-forward::view-transition-old(*),
34
+
html.astro-forward::view-transition-new(*) {
35
+
animation-name: none !important;
73
36
}
74
37
75
38
@keyframes fade-out {