fix: submenu animation lose #4325

vueComponent · Jul 6, 2021 · 16ee0dd · 16ee0dd
1 parent b7b433e
commit 16ee0dd
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/components/menu/src/SubMenu.tsx b/components/menu/src/SubMenu.tsx
@@ -283,6 +283,10 @@ export default defineComponent({
             {titleNode}
           </PopupTrigger>
         );
+      } else {
+        // 包裹一层，保持结构一致，防止动画丢失
+        // https://github.com/vueComponent/ant-design-vue/issues/4325
+        titleNode = <PopupTrigger>{titleNode}</PopupTrigger>;
       }
       return (
         <MenuContextProvider props={{ mode: renderMode }}>

diff --git a/components/menu/style/index.less b/components/menu/style/index.less
@@ -120,14 +120,6 @@
     background-color: @border-color-split;
   }
 
-  &-item:hover,
-  &-item-active,
-  &:not(&-inline) &-submenu-open,
-  &-submenu-active,
-  &-submenu-title:hover {
-    color: @menu-highlight-color;
-  }
-
   &-horizontal &-item,
   &-horizontal &-submenu {
     margin-top: -1px;
@@ -671,5 +663,6 @@
   }
 }
 
+@import './light';
 @import './dark';
 @import './rtl';
diff --git a/components/menu/style/light.less b/components/menu/style/light.less
@@ -0,0 +1,12 @@
+.@{menu-prefix-cls} {
+  // light theme
+  &-light {
+    .@{menu-prefix-cls}-item:hover,
+    .@{menu-prefix-cls}-item-active,
+    .@{menu-prefix-cls}:not(.@{menu-prefix-cls}-inline) .@{menu-prefix-cls}-submenu-open,
+    .@{menu-prefix-cls}-submenu-active,
+    .@{menu-prefix-cls}-submenu-title:hover {
+      color: @menu-highlight-color;
+    }
+  }
+}