diff --git a/admin/src/animation.css b/admin/src/animation.css
index 86ead4e..b8ba5f2 100644
--- 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
index 7d15b95..e56f5e7 100644
--- 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 {
{p.item.label}
-
diff --git a/admin/src/components/tree/menu/style.css b/admin/src/components/tree/menu/style.css
index 3b2b25d..6d014b0 100644
--- 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;
}