refactor(admin/menu): 添加二级菜单动画

issue9 · Jan 14, 2025 · 49b8c71 · 49b8c71
1 parent a494977
commit 49b8c71
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/admin/src/animation.css b/admin/src/animation.css
@@ -12,6 +12,8 @@
         display: block;
         visibility: hidden;
         opacity: 0;
+
+        /* 两个属性同时发生变化，但是 visibility 没有过渡动画，等待时间到之后直接改变其属性。 */
         transition: visibility 0s var(--transition-duration), opacity var(--transition-duration) linear;
     }
 

diff --git a/admin/src/components/tree/menu/panel.tsx b/admin/src/components/tree/menu/panel.tsx
@@ -75,7 +75,7 @@ export default function (props: Props): JSX.Element {
                 <li class="item">
                     {p.item.label}
                     <Icon class="expand" icon="chevron_right" />
-                    <menu classList={{'c--menu':true,'hidden':true,[props.direction!]:true}}>
+                    <menu classList={{'c--menu':true,'opacity-0':true,[props.direction!]:true}}>
                         <All items={p.item.items as Array<Item>} />
                     </menu>
                 </li>

diff --git a/admin/src/components/tree/menu/style.css b/admin/src/components/tree/menu/style.css
@@ -23,12 +23,6 @@
             .expand {
                 @apply ml-auto flex items-center;
             }
-        }
-
-        .item:hover {
-            >.c--menu {
-                @apply absolute top-0 flex-col flex;
-            }
 
             >.c--menu.left {
                 @apply right-[100%];
@@ -39,6 +33,24 @@
             }
         }
 
+        .item:hover {
+            >.c--menu {
+                @apply absolute top-0 flex-col flex;
+
+                opacity: 1;
+                visibility: visible;
+                transition: opacity var(--transition-duration) linear;
+            }
+        }
+
+        .opacity-0 {
+            @apply absolute top-0 flex-col flex;
+
+            visibility: hidden;
+            opacity: 0;
+            transition: visibility 0s var(--transition-duration), opacity var(--transition-duration) linear;
+        }
+
         .group {
             @apply text-[var(--fg-low)] cursor-default px-2;
         }