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; }