@smbcloud / solanastockholmmeetup
Code Commits Issues Pulls Cloud Agent CI/CD
main
dependabot/npm_and_yarn/eslint-9.39.1 dependabot/npm_and_yarn/eslint-plugin-astro-1.5.0 dependabot/npm_and_yarn/eslint/js-9.39.1 dependabot/npm_and_yarn/katex-0.16.25 dependabot/npm_and_yarn/sharp-0.34.5 dependabot/npm_and_yarn/tailwindcss/vite-4.1.17 dependabot/npm_and_yarn/tsx-4.20.6 dependabot/npm_and_yarn/typescript-eslint-8.46.4 dependabot/npm_and_yarn/typescript-eslint/eslint-plugin-8.36.0 dependabot/npm_and_yarn/typescript-eslint/parser-8.46.4 main
astro 89 lines 2.14 KB
Raw
1 ---
2 import { SITE } from '@/config'
3 import type { TransitionProps } from '@/types'
4
5 type Props = TransitionProps
6
7 const { type, class: className = '' } = Astro.props
8 const transitionName = type === 'post' ? 'post-content' : 'page-content'
9 ---
10
11 {
12 SITE.fadeAnimation ? (
13 <div transition:name={transitionName} transition:animate="initial" class={className}>
14 <slot />
15 </div>
16 ) : (
17 <div class={className}>
18 <slot />
19 </div>
20 )
21 }
22
23 <style is:global>
24 @supports (view-transition-name: none) {
25 @media not (prefers-reduced-motion: reduce) {
26 ::view-transition-old(post-content),
27 ::view-transition-old(page-content) {
28 animation: fade-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
29 }
30
31 ::view-transition-new(post-content),
32 ::view-transition-new(page-content) {
33 opacity: 0;
34 animation: fade-in 0.4s ease 0.2s forwards;
35 }
36 }
37 }
38
39 @keyframes fade-out {
40 0% {
41 opacity: 1;
42 }
43 100% {
44 opacity: 0;
45 }
46 }
47
48 @keyframes fade-in {
49 0% {
50 opacity: 0;
51 filter: blur(8px);
52 }
53 30% {
54 opacity: 0.5;
55 filter: blur(4px);
56 }
57 100% {
58 opacity: 1;
59 filter: blur(0);
60 }
61 }
62
63 .no-fade ::view-transition-old(post-content),
64 .no-fade ::view-transition-new(post-content),
65 .no-fade ::view-transition-old(page-content),
66 .no-fade ::view-transition-new(page-content),
67 .disable-transitions ::view-transition-old(post-content),
68 .disable-transitions ::view-transition-new(post-content),
69 .disable-transitions ::view-transition-old(page-content),
70 .disable-transitions ::view-transition-new(page-content) {
71 animation: none !important;
72 }
73
74 .reduce-motion ::view-transition-old(post-content),
75 .reduce-motion ::view-transition-new(post-content),
76 .reduce-motion ::view-transition-old(page-content),
77 .reduce-motion ::view-transition-new(page-content) {
78 animation: none !important;
79 }
80
81 @media (prefers-reduced-motion: reduce) {
82 * {
83 animation-duration: 0.01ms !important;
84 transition-duration: 0.01ms !important;
85 animation-iteration-count: 1 !important;
86 scroll-behavior: auto !important;
87 }
88 }
89 </style>