feat: new image transition

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/common/ToastCard.tsx

@@ -31,7 +31,7 @@ export const ToastCard: FC<{
       layoutId={id}
       layout="position"
       className={clsx(
-        'relative w-full overflow-hidden rounded-xl shadow-out-sm',
+        'relative w-full overflow-hidden rounded-xl shadow-md shadow-slate-200 dark:shadow-stone-800',
         'my-4 mr-4 px-4 py-5',
         'bg-slate-50/90 backdrop-blur-sm dark:bg-neutral-900/90',
         'border border-slate-100/80 dark:border-neutral-900/80',

src/components/ui/image/ZoomedImage.module.css

@@ -0,0 +1,21 @@
+.error,
+.loading {
+  @apply opacity-0;
+}
+
+.loaded {
+  animation: zoomIn 500ms ease-in-out forwards;
+}
+
+@keyframes zoomIn {
+  0% {
+    opacity: 0;
+    clip-path: inset(5%);
+    transform: scale(111.11%);
+  }
+  100% {
+    opacity: 1;
+    clip-path: inset(0);
+    transform: scale(1);
+  }
+}

src/components/ui/image/ZoomedImage.tsx

@@ -2,7 +2,7 @@
 
 import { isServer } from '@tanstack/react-query'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { motion, useAnimationControls } from 'framer-motion'
+import { useAnimationControls } from 'framer-motion'
 import mediumZoom from 'medium-zoom'
 import { tv } from 'tailwind-variants'
 import type { Zoom } from 'medium-zoom'
@@ -16,6 +16,7 @@ import { useMarkdownImageRecord } from '~/providers/article/markdown-image-recor
 import { clsxm } from '~/utils/helper'
 
 import { Divider } from '../divider'
+import imageStyles from './ZoomedImage.module.css'
 
 type TImageProps = {
   src: string
@@ -109,33 +110,24 @@ export const ImageLazy: Component<TImageProps & BaseImageProps> = ({
           <span>
             {imageLoadStatus !== ImageLoadStatus.Loaded && placeholder}
           </span>
-          <motion.img
-            variants={{
-              loading: {
-                opacity: 0,
-                // filter: 'blur(10px)',
-              },
-              loaded: {
-                opacity: 1,
-                // filter: 'blur(0px)',
-              },
-            }}
-            initial="loading"
-            animate={controls}
+          <img
             src={src}
             title={title}
             alt={alt}
             ref={imageRef}
             onLoad={() => {
               setImageLoadStatusSafe(ImageLoadStatus.Loaded)
-              requestAnimationFrame(() => {
-                controls.start('loaded')
-              })
             }}
             onError={() => setImageLoadStatusSafe(ImageLoadStatus.Error)}
             className={styles({
               status: imageLoadStatus,
+              className: imageStyles[ImageLoadStatus.Loaded],
             })}
+            onAnimationEnd={(e) => {
+              if (ImageLoadStatus.Loaded) {
+               (e.target as HTMLElement).classList.remove(imageStyles[ImageLoadStatus.Loaded]) 
+              }
+            }}
           />
         </span>
 

src/providers/root/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { ReactQueryProvider } from './react-query-provider'
+import { Provider as BalancerProvider } from 'react-wrap-balancer'
 import { ThemeProvider } from 'next-themes'
 import type { PropsWithChildren } from 'react'
 
@@ -24,6 +25,7 @@ const contexts: JSX.Element[] = [
 
   <PageScrollInfoProvider key="PageScrollInfoProvider" />,
   <DebugProvider key="debugProvider" />,
+  <BalancerProvider key="balancerProvider" />,
   <ModalStackProvider key="modalStackProvider" />,
 ]
 export function Providers({ children }: PropsWithChildren) {