From a5e7460335bb1410bd13ad5050513bdecaf152c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Thu, 27 Jun 2024 10:44:43 +0800
Subject: [PATCH] enhance(menu): menu color transition of selected items

---
 .../web-vue/components/menu/style/index.less  | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/web-vue/components/menu/style/index.less b/packages/web-vue/components/menu/style/index.less
index 03a834483..4c80a7b25 100644
--- a/packages/web-vue/components/menu/style/index.less
+++ b/packages/web-vue/components/menu/style/index.less
@@ -14,6 +14,16 @@
   }
 }
 
+@keyframes ~'@{prefix}-menu-selected-item-label-enter' {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 .@{menu-prefix-cls} {
   position: relative;
   box-sizing: border-box;
@@ -32,6 +42,10 @@
     width: @menu-item-indent-spacing;
   }
 
+  .text-color-transition() {
+    transition: color @transition-duration-2 @transition-timing-function-linear;
+  }
+
   // menu-item 一些与 theme 和 mode 无关的样式
   .item-base() {
     @style: {
@@ -46,8 +60,11 @@
 
       &.@{menu-prefix-cls}-selected {
         font-weight: @menu-font-weight-item-selected;
-        transition: color @transition-duration-2
-          @transition-timing-function-linear;
+        .text-color-transition();
+
+        svg {
+          .text-color-transition();
+        }
       }
 
       .@{prefix}-icon,
@@ -196,8 +213,7 @@
         @item-selected-style: {
           &.@{menu-prefix-cls}-selected {
             background: none;
-            transition: color @transition-duration-2
-              @transition-timing-function-linear;
+            .text-color-transition();
 
             &:hover {
               background-color: ~'@{menu-@{theme}-color-bg-item_hover}';
@@ -331,6 +347,8 @@
     left: @menu-horizontal-item-padding-horizontal;
     height: @menu-height-label-item-selected;
     background-color: @menu-color-label-item-selected;
+    animation: ~'@{prefix}-menu-selected-item-label-enter' @transition-duration-2
+      @transition-timing-function-linear;
   }
 
   &-pop-button {