resize animation poc

liam-hq · Jan 31, 2025 · a1b5937 · a1b5937
1 parent f13710d
commit a1b5937
Showing 1 changed file with 18 additions and 11 deletions.
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar.module.css
@@ -1,22 +1,28 @@
 @keyframes collapse {
-  from {
-    width: 170px; /* TODO: 157px */
-    height: 245px;
+  0% {
+    transform: scale(3, 4);
+    border-width: calc(1px / 3);
+    border-radius: calc(8px / 3);
   }
+
   to {
-    width: 40px;
-    height: 40px;
+    transform: scale(1, 1);
+    border-width: 1px;
+    border-radius: 8px;
   }
 }
 
 @keyframes expand {
-  from {
-    width: 40px;
-    height: 40px;
+  0% {
+    transform: scale(0.235, 0.167);
+    border-width: calc(1px * 0.235);
+    border-radius: calc(8px * 0.235);
   }
+
   to {
-    width: 170px;
-    height: 245px;
+    transform: scale(1, 1);
+    border-width: 1px;
+    border-radius: 8px;
   }
 }
 
@@ -42,9 +48,10 @@
   flex-direction: column;
   justify-content: center;
   gap: var(--spacing-2, 8px);
-  transition: width 150ms ease, height 150ms ease;
+  transition: transform 150ms ease;
   min-height: 40px;
   z-index: var(--z-index-toolbar);
+  transform-origin: bottom left;
 }
 
 @media screen and (max-width: 767px) {