From 04df185d7edceb607be98a25396fd16251469968 Mon Sep 17 00:00:00 2001
From: Timo Clasen <goebeltimo@gmail.com>
Date: Sat, 2 Sep 2023 20:49:32 +0200
Subject: [PATCH] Improve Accordion Animations (#23)

* Improve Accordion Animations

* Fix Initial Content Opacity
---
 .../components/Accordion/Accordion.module.css | 28 +++++++++----------
 .../src/components/Accordion/Accordion.tsx    | 10 +++----
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/website/src/components/Accordion/Accordion.module.css b/apps/website/src/components/Accordion/Accordion.module.css
index 6deb4c2..7efa4fd 100644
--- a/apps/website/src/components/Accordion/Accordion.module.css
+++ b/apps/website/src/components/Accordion/Accordion.module.css
@@ -1,32 +1,27 @@
 .AccordionContent[data-state="open"] {
   animation: slideDown 300ms linear;
-  opacity: 1;
 }
 .AccordionContent[data-state="closed"] {
   animation: slideUp 300ms linear;
-  opacity: 0;
 }
 
 @media (min-width: 1024px) {
   .AccordionContent[data-state="open"] {
-    animation: openHorizontal 600ms linear;
-    opacity: 1;
+    animation:
+      openHorizontal 300ms linear,
+      fadeIn 600ms linear;
   }
   .AccordionContent[data-state="closed"] {
-    animation: closeHorizontal 300ms linear;
     opacity: 0;
+    animation: closeHorizontal 300ms linear;
   }
 }
 
-@keyframes openHorizontal {
+@keyframes fadeIn {
   0% {
-    width: 0;
     opacity: 0;
   }
   50% {
-    width: var(--radix-accordion-content-width);
-  }
-  75% {
     opacity: 0;
   }
   100% {
@@ -34,6 +29,15 @@
   }
 }
 
+@keyframes openHorizontal {
+  from {
+    width: 0;
+  }
+  to {
+    width: var(--radix-accordion-content-width);
+  }
+}
+
 @keyframes closeHorizontal {
   0% {
     width: var(--radix-accordion-content-width);
@@ -46,21 +50,17 @@
 @keyframes slideDown {
   from {
     height: 0;
-    opacity: 0;
   }
   to {
     height: var(--radix-accordion-content-height);
-    opacity: 1;
   }
 }
 
 @keyframes slideUp {
   from {
     height: var(--radix-accordion-content-height);
-    opacity: 1;
   }
   to {
     height: 0;
-    opacity: 0;
   }
 }
diff --git a/apps/website/src/components/Accordion/Accordion.tsx b/apps/website/src/components/Accordion/Accordion.tsx
index 56a0c84..5cdde32 100644
--- a/apps/website/src/components/Accordion/Accordion.tsx
+++ b/apps/website/src/components/Accordion/Accordion.tsx
@@ -28,7 +28,7 @@ const itemVariants = cva(
         ...backgroundColorsMap,
       },
     },
-  }
+  },
 );
 
 const triggerVariants = cva(
@@ -40,10 +40,10 @@ const triggerVariants = cva(
         large: "data-[state=open]:hidden",
       },
     },
-  }
+  },
 );
 
-const contentVariants = cva("overflow-hidden p-6 sm:p-10", {
+const contentVariants = cva("overflow-hidden", {
   variants: {
     size: {
       medium: "lg:pl-0",
@@ -101,10 +101,10 @@ export const Accordion = ({
               className={cx(
                 "w-full",
                 styles.AccordionContent,
-                contentVariants({ size })
+                contentVariants({ size }),
               )}
             >
-              <div className="flex h-full flex-col items-start overflow-auto">
+              <div className="flex h-full flex-col items-start overflow-auto p-6 sm:p-10">
                 {size === "large" && (
                   <>
                     <div className="flex w-full justify-center">