Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/trueberryless/the-thinking-hub. The central knowledge hub for 8 key Computer Science thinking modes. the-thinking-hub.felixs.dev
Something went wrong. Try again.
1.7 kB · 74 lines
Astro
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475---import type { TransitionProps } from '@/types'
type Props = TransitionProps
const { type, class: className = '' } = Astro.propsconst transitionName = type === 'post' ? 'post-content' : 'page-content'---
<div transition:name={transitionName} 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(post-content), ::view-transition-old(page-content) { animation: fade-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
::view-transition-new(post-content), ::view-transition-new(page-content) { 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>