From 16ee0dd2f1153b9299ebf8eeec1aab097c0204f5 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Tue, 6 Jul 2021 15:54:58 +0800
Subject: [PATCH] fix: submenu animation lose #4325

---
 components/menu/src/SubMenu.tsx  |  4 ++++
 components/menu/style/index.less |  9 +--------
 components/menu/style/light.less | 12 ++++++++++++
 3 files changed, 17 insertions(+), 8 deletions(-)
 create mode 100644 components/menu/style/light.less

diff --git a/components/menu/src/SubMenu.tsx b/components/menu/src/SubMenu.tsx
index 283cc30643..762da791b1 100644
--- 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
index 2a691763a3..aa649f47cd 100644
--- 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
new file mode 100644
index 0000000000..06cd6d0c07
--- /dev/null
+++ 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;
+    }
+  }
+}