forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1---
2import { themeConfig } from '@/config'
3import type { TransitionProps } from '@/types'
4
5type Props = TransitionProps
6
7const { type, class: className = '' } = Astro.props
8const transitionName = type === 'post' ? 'post-content' : 'page-content'
9---
10
11{
12 themeConfig.general.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>