enhance(menu): menu color transition of selected items

arco-design · Jun 27, 2024 · a5e7460 · a5e7460
1 parent 6e7269c
commit a5e7460
Showing 1 changed file with 22 additions and 4 deletions.
diff --git 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 {