Fork of Chiri for Astro for my blog
1---
2import type { TransitionProps } from '@/types'
3
4type Props = TransitionProps
5
6const { class: className = '' } = Astro.props
7---
8
9<div class={className} id="transition-wrapper">
10 <slot />
11</div>
12
13<script is:inline>
14 // Cleanup hover states after Astro page load and on touch events
15 function cleanupHover() {
16 const hoveredLinks = document.querySelectorAll('ul a:hover')
17 hoveredLinks.forEach((link) => {
18 link.style.opacity = ''
19 })
20 }
21
22 document.addEventListener('astro:page-load', () => {
23 setTimeout(cleanupHover, 50)
24 })
25
26 // Add touch event listener for touch devices
27 document.addEventListener('touchstart', cleanupHover, { passive: true })
28</script>
29
30<style is:inline>
31 @supports (view-transition-name: none) {
32 @media not (prefers-reduced-motion: reduce) {
33 ::view-transition-old(root) {
34 animation: fade-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
35 }
36
37 ::view-transition-new(root) {
38 opacity: 0;
39 animation: fade-in 0.4s ease 0.2s forwards;
40 will-change: filter, opacity, transform;
41 }
42 }
43 }
44
45 @keyframes fade-out {
46 0% {
47 opacity: 1;
48 }
49 100% {
50 opacity: 0;
51 }
52 }
53
54 @keyframes fade-in {
55 0% {
56 opacity: 0;
57 filter: blur(8px);
58 transform: translateZ(0);
59 }
60 30% {
61 opacity: 0.5;
62 filter: blur(4px);
63 transform: translateZ(0);
64 }
65 100% {
66 opacity: 1;
67 filter: blur(0);
68 transform: translateZ(0);
69 }
70 }
71</style>