refactor(web): scale fade transition

2026-08-18 07:26:02 +01:00 · 2022-12-31 15:03:16 +01:00
parent 8722d25171
commit 2a1e7ff632
5 changed files with 147 additions and 102 deletions
--- a/web/src/transitions/ScaleFade.tsx
+++ b/web/src/transitions/ScaleFade.tsx
@@ -0,0 +1,22 @@
+import { AnimatePresence, motion } from 'framer-motion';
+
+const ScaleFade: React.FC<{ visible: boolean; children: React.ReactNode }> = ({ visible, children }) => {
+  return (
+    <>
+      <AnimatePresence initial={false}>
+        {visible && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.1 }}
+          >
+            {children}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};
+
+export default ScaleFade;