Site: use alternative CSS-only animation for accordion block (#735)

vivid-planet · Feb 20, 2025 · 56b3cbb · 56b3cbb
1 parent 8974dac
commit 56b3cbb
Showing 1 changed file with 13 additions and 14 deletions.
diff --git a/site/src/common/blocks/AccordionItemBlock.tsx b/site/src/common/blocks/AccordionItemBlock.tsx
@@ -45,8 +45,8 @@ export const AccordionItemBlock = withPreview(
                         <AnimatedChevron href="/assets/icons/chevron-down.svg#root" $isExpanded={isExpanded} />
                     </IconWrapper>
                 </TitleWrapper>
-                <ContentWrapper aria-hidden={!isExpanded}>
-                    <ContentWrapperInner $isExpanded={isExpanded}>
+                <ContentWrapper aria-hidden={!isExpanded} $isExpanded={isExpanded}>
+                    <ContentWrapperInner>
                         <AccordionContentBlock data={content} />
                     </ContentWrapperInner>
                 </ContentWrapper>
@@ -84,21 +84,20 @@ const AnimatedChevron = styled(SvgUse)<{ $isExpanded: boolean }>`
     transition: transform 0.4s ease;
 `;
 
-const ContentWrapper = styled.div`
-    overflow: hidden;
-`;
-
-const ContentWrapperInner = styled.div<{ $isExpanded: boolean }>`
-    padding-bottom: ${({ theme }) => theme.spacing.S300};
-    margin-top: -100%;
-    opacity: 0;
-    transition: margin-top 0.8s ease-out 0.3s, opacity 0.3s linear;
+const ContentWrapper = styled.div<{ $isExpanded: boolean }>`
+    position: relative;
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.5s ease-out;
 
     ${({ $isExpanded }) =>
         $isExpanded &&
         css`
-            margin-top: 0;
-            opacity: 1;
-            transition: margin-top 0.5s ease-out, opacity 0.3s linear 0.4s;
+            grid-template-rows: 1fr;
+            padding-bottom: ${({ theme }) => theme.spacing.S300};
         `}
 `;
+
+const ContentWrapperInner = styled.div`
+    overflow: hidden;
+`;