Animate the Upcoming Event component

astro/src/components/web/subcomponents/UpcomingEvent.tsx

@@ -3,23 +3,30 @@ import { useEffect, useState } from "preact/hooks"
 
 export function upcomingEvent(props: { event: UpcomingEvent }) {
     const [ isOpen, setIsOpen ] = useState<boolean>(false);
+    const [ isVisible, setIsVisible ] = useState<boolean>(false);
 
-    useEffect(() => {
-        console.log(isOpen);
-    }, [ isOpen ])
+    const open = () => {
+        setIsOpen(true);
+        setTimeout(() => setIsVisible(true), 10); // allow DOM mount
+    };
+
+    const close = () => {
+        setIsVisible(false);
+        setTimeout(() => setIsOpen(false), 200); // match animation duration
+    };
 
     return (
         <div>
-            <div className="hover:cursor-pointer text-indigo-400 underline" onClick={() => setIsOpen(true)}>{"Read more >>"}</div>
+            <div className="hover:cursor-pointer text-indigo-400 underline" onClick={open}>{"Read more >>"}</div>
 
             { isOpen && (
                 <div
-                    onClick={() => setIsOpen(false)}
-                    className="fixed inset-0 flex items-center justify-center bg-[#000000bb] shadow-md z-999999999999"
+                    onClick={close}
+                    className={`fixed inset-0 flex items-center justify-center bg-[#000000bb] shadow-md z-999999999999 duration-200 ${isVisible ? "opacity-100" : "opacity-0"}`}
                 >
                     <div
                         onClick={(e) => e.stopPropagation()}
-                        className="relative bg-white rounded-2xl shadow-xl max-w-md w-full p-6 animate-in fade-in zoom-in-95"
+                        className={`relative bg-white rounded-2xl shadow-xl max-w-md w-full p-6 transition-all duration-200 ${isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}
                     >
                         <div className="flex flex-col gap-1.5">
                             <h4 className="text-2xl font-semibold">{props.event.title}</h4>