Debugging CSS transitions

mui · Nov 17, 2024 · 307c354 · 307c354
1 parent 42077e9
commit 307c354
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/docs/src/app/experiments/collapsible.module.css b/docs/src/app/experiments/collapsible.module.css
@@ -1,6 +1,6 @@
 .wrapper {
   --width: 320px;
-  --duration: 300ms;
+  --duration: 1000ms;
 
   font-family: system-ui, sans-serif;
   line-height: 1.4;
@@ -55,18 +55,19 @@
   animation: slideUp var(--duration) ease-in;
 }
 
-.panel.transition[data-open] {
-  height: var(--collapsible-panel-height);
-  transition: height var(--duration) ease-out;
-}
-
 .panel.transition {
   height: 0;
   transition: height var(--duration) ease-in;
 }
 
+.panel.transition[data-open] {
+  height: var(--collapsible-panel-height);
+  transition: height var(--duration) ease-out;
+}
+
 .panel.transition[data-entering] {
-  height: 0;
+  height: var(--collapsible-panel-height);
+  /*  transition: height var(--duration) ease-out;*/
 }
 
 .panel.framer {