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