From 6cc57119ab306420b80f6386f956b60f263a40d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=8B=E1=85=A7=E1=86=BC?=
 =?UTF-8?q?=E1=84=92=E1=85=AE=E1=86=AB/FE=20=E1=84=80=E1=85=A2=E1=84=87?=
 =?UTF-8?q?=E1=85=A1=E1=86=AF=E1=84=90=E1=85=B5=E1=86=B7/II?=
 <yhoon.kim@injeinc.co.kr>
Date: Wed, 4 Sep 2024 17:39:45 +0900
Subject: [PATCH] fix animating-content-size docs

---
 .../docs/components/accordion/1.2.0.mdx       | 37 +++++++++++++++++++
 .../docs/components/collapsible/1.1.0.mdx     | 37 +++++++++++++++++++
 2 files changed, 74 insertions(+)

diff --git a/data/primitives/docs/components/accordion/1.2.0.mdx b/data/primitives/docs/components/accordion/1.2.0.mdx
index 17c7ba034..1fbff0411 100644
--- a/data/primitives/docs/components/accordion/1.2.0.mdx
+++ b/data/primitives/docs/components/accordion/1.2.0.mdx
@@ -558,6 +558,43 @@ export default () => (
 }
 ```
 
+#### Applying Animations in Non-Tailwind CSS Projects
+
+When working with CSS animations outside of Tailwind, it’s important to avoid conflicts with dynamic height calculations, especially in flex layouts. Instead of using height, you can use **max-height** for smoother animations and to prevent double rendering issues. Here’s how you can define the animations using **max-height**:
+
+```css
+/* styles.css */
+.AccordionContent {
+  overflow: hidden;
+}
+.AccordionContent[data-state='open'] {
+  animation: slideDown 300ms ease-out;
+}
+.AccordionContent[data-state='closed'] {
+  animation: slideUp 300ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    __max-height__: 0;
+  }
+  to {
+    __max-height__: var(__--radix-accordion-content-height__);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    __max-height__: var(__--radix-accordion-content-height__);
+  }
+  to {
+    __max-height__: 0;
+  }
+}
+```
+
+Using **max-height** ensures that the animation doesn’t conflict with the automatic height calculations performed by flex layouts, leading to smoother transitions without layout recalculation issues.
+
 ## Accessibility
 
 Adheres to the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion).
diff --git a/data/primitives/docs/components/collapsible/1.1.0.mdx b/data/primitives/docs/components/collapsible/1.1.0.mdx
index 520ce9796..1bbe2c51d 100644
--- a/data/primitives/docs/components/collapsible/1.1.0.mdx
+++ b/data/primitives/docs/components/collapsible/1.1.0.mdx
@@ -264,6 +264,43 @@ export default () => (
 }
 ```
 
+#### Applying Animations in Non-Tailwind CSS Projects
+
+When working with CSS animations outside of Tailwind, it’s important to avoid conflicts with dynamic height calculations, especially in flex layouts. Instead of using height, you can use **max-height** for smoother animations and to prevent double rendering issues. Here’s how you can define the animations using **max-height**:
+
+```css
+/* styles.css */
+.AccordionContent {
+  overflow: hidden;
+}
+.AccordionContent[data-state='open'] {
+  animation: slideDown 300ms ease-out;
+}
+.AccordionContent[data-state='closed'] {
+  animation: slideUp 300ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    __max-height__: 0;
+  }
+  to {
+    __max-height__: var(__--radix-accordion-content-height__);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    __max-height__: var(__--radix-accordion-content-height__);
+  }
+  to {
+    __max-height__: 0;
+  }
+}
+```
+
+Using **max-height** ensures that the animation doesn’t conflict with the automatic height calculations performed by flex layouts, leading to smoother transitions without layout recalculation issues.
+
 ## Accessibility
 
 Adheres to the [Disclosure WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure).