fix: submenu animation lose #4325

Author: tangjinzhou

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

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

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