add animation

components/ui/accordion.tsx

@@ -29,8 +29,8 @@ const Accordion = ({
       collapsible
     >
       {items?.map(({ label, children, value }) => (
-        <RadixAccordion.Item value={value}>
-          <RadixAccordion.Trigger className="flex items-center justify-between w-full py-6 border-t group border-t-black ring-0 focus:outline-none">
+        <RadixAccordion.Item className="group" value={value}>
+          <RadixAccordion.Trigger className="flex items-center justify-between w-full py-6 border-t border-t-black ring-0 focus:outline-none">
             <span className="font-sans text-base md:text-xl font-bold text-black uppercase tracking-[3.36px] md:tracking-[4.2px] block text-left">
               {label}
             </span>
@@ -43,7 +43,9 @@ const Accordion = ({
               <Icons.minus className="w-4 md:w-8" />
             </div>
           </RadixAccordion.Trigger>
-          <RadixAccordion.Content>{children}</RadixAccordion.Content>
+          <RadixAccordion.Content className="group-data-[state=open]:animate-slide-down group-data-[state=closed]:animate-slide-up transition-transform overflow-hidden">
+            {children}
+          </RadixAccordion.Content>
         </RadixAccordion.Item>
       ))}
     </RadixAccordion.Root>

tailwind.config.js

@@ -102,12 +102,22 @@ module.exports = {
           from: { opacity: 0, transform: "translate(-50%, -48%) scale(0.96)" },
           to: { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
         },
+        "slide-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "slide-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "overlay-show": "overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
         "content-show": "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        "slide-down": "slide-down 0.3s ease-out",
+        "slide-up": "slide-up 0.3s ease-out",
       },
     },
   },