Something went wrong. Try again.
Fork of Chiri for Astro for my blog forked from quillmatiq.com/augment
Something went wrong. Try again.
1.5 kB · 71 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172---import type { TransitionProps } from '@/types'
type Props = TransitionProps
const { class: className = '' } = Astro.props---
<div class={className} id="transition-wrapper"> <slot /></div>
<script is:inline> // Cleanup hover states after Astro page load and on touch events function cleanupHover() { const hoveredLinks = document.querySelectorAll('ul a:hover') hoveredLinks.forEach((link) => { link.style.opacity = '' }) }
document.addEventListener('astro:page-load', () => { setTimeout(cleanupHover, 50) })
// Add touch event listener for touch devices document.addEventListener('touchstart', cleanupHover, { passive: true })</script>
<style is:inline> @supports (view-transition-name: none) { @media not (prefers-reduced-motion: reduce) { ::view-transition-old(root) { animation: fade-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
::view-transition-new(root) { opacity: 0; animation: fade-in 0.4s ease 0.2s forwards; will-change: filter, opacity, transform; } } }
@keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fade-in { 0% { opacity: 0; filter: blur(8px); transform: translateZ(0); } 30% { opacity: 0.5; filter: blur(4px); transform: translateZ(0); } 100% { opacity: 1; filter: blur(0); transform: translateZ(0); } }</style>