docs: use css variable for collapsed height in animations (#2742)

jramke · web-flow · commit 4e8eff4fbd66 · 2025-09-29T11:59:44.000+01:00
diff --git a/website/data/components/collapsible.mdx b/website/data/components/collapsible.mdx
@@ -112,7 +112,7 @@ Use CSS animations to animate the collapsible when it expands and collapses. The
 ```css
 @keyframes expand {
   from {
-    height: 0;
+    height: var(--collapsed-height, 0);
   }
   to {
     height: var(--height);
@@ -124,7 +124,7 @@ Use CSS animations to animate the collapsible when it expands and collapses. The
     height: var(--height);
   }
   to {
-    height: 0;
+    height: var(--collapsed-height, 0);
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -112,7 +112,7 @@ Use CSS animations to animate the collapsible when it expands and collapses. The`
`112`	`112`	```css
`113`	`113`	`@keyframes expand {`
`114`	`114`	`from {`
`115`		`- height: 0;`
	`115`	`+ height: var(--collapsed-height, 0);`
`116`	`116`	`}`
`117`	`117`	`to {`
`118`	`118`	`height: var(--height);`
`@@ -124,7 +124,7 @@ Use CSS animations to animate the collapsible when it expands and collapses. The`
`124`	`124`	`height: var(--height);`
`125`	`125`	`}`
`126`	`126`	`to {`
`127`		`- height: 0;`
	`127`	`+ height: var(--collapsed-height, 0);`
`128`	`128`	`}`
`129`	`129`	`}`
`130`	`130`